谷歌地圖 API 開發之獲取座標以及街道詳情

時間 2019-11-10

標籤谷歌地圖 api 開發獲取座標以及街道詳情欄目 Chrome 简体版

原文原文鏈接

本身的項目中有獲取當前點擊的座標經緯度或者獲取當前街道的信息的需求。
估計這個對於新手來講，仍是比較麻煩的，由於從官網上找這個也並非很好找，要找很久的，運氣好的可能會一會兒找到。javascript

獻上本身寫的測試案例。代碼以下：html

<!DOCTYPE html>
<html>

<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #map {
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        function initMap() {
            var myLatlng = {
                lat: 39.921323,
                lng: 116.426239
            };
            var marker ;
            var markersArray = [];
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: myLatlng
            });
            map.addListener('click', function(e) {
                addMarker(e.latLng, map);
                //根據經緯度獲取 當前地理信息
                var latLngData = e.latLng.lat().toFixed(6)+','+e.latLng.lng().toFixed(6);
                console.log(latLngData)
                $.ajax({
                    type:"post",
                    url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE",
                    async:true,
                    success:function(data){
                        console.log(data)
                        var site = latLngData+'<br />'+data.results[0].formatted_address;
                        console.log(site)
                        var infowindow = new google.maps.InfoWindow({
                            content: site
                        });
                        infowindow.open(map,marker); //彈出信息提示窗口
                    }
                });
                
            });
            //添加座標對象
            function addMarker(latLng, map) {
                if(markersArray.length>0){
                        markersArray[0].setMap(null);
                };
                markersArray.shift(marker)
                marker = new google.maps.Marker({
                    position: latLng,
                    map: map
                });
                markersArray.push(marker);
            }
        }
    </script>
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE&callback=initMap" async defer></script>
</body>

</html>

注意：請引入本身本地的jquery，由於要用的ajax請求，谷歌的地理服務接口。java

代碼的核心就在於請求的URL：jquery

url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE"

這個是經緯度反向地理編碼，這段url裏有四個參數：latlng，location_type，result_type，key，具體概念以及參數詳解，請參考下一章的谷歌地圖API 開發之 Geocoding APIajax

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。