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

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

獻上本身寫的測試案例。代碼以下:jquery

<!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 }); // ---- Google隱藏 ----
            var isFirstLoad=true; //地圖瓦片加載完成以後的回調
            google.maps.event.addListener(map, 'tilesloaded', function () { if (isFirstLoad) { hideLogo(); isFirstLoad=false; } }); function hideLogo() { $("#map .gm-style-cc").hide(); $("#map [title='點擊以在 Google 地圖上查看此區域']").hide(); } // ---- Google隱藏 ----
            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="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE&callback=initMap" async defer></script>
</body>

</html>
<script> $(window).load(function(){ //$("#map [title='點擊以在 Google 地圖上查看此區域']").hide(); 
        //$('.gm-style-cc').hide();
 }); </script>

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

代碼的核心就在於請求的URL:json

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

這個是經緯度反向地理編碼, 這段url裏有四個參數:latlnglocation_typeresult_typekey,具體概念以及參數詳解,請參考下一章的 谷歌地圖API 開發 之 Geocoding APIsegmentfault

相關文章
相關標籤/搜索