自己的項目中有獲取當前點擊的坐標經緯度或者獲取當前街道的信息的需求。
估計這個對於新手來說，還是比較麻煩的，因為從官網上找這個也並不是很好找，要找好久的，運氣好的可能會一下子找到。
獻上自己寫的測試案例。代碼如下：
<!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請求，谷歌的地理服務接口。
代碼的核心就在於請求的URL：
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 API