前段時間做了一個簡單調用Google Map API的項目，因為之前沒有接觸過這些，所以在看了文檔做出來之后自己稍微總結一下。
加載 Google Maps JavaScript API
官方指導教程中寫的引入的Google Map API是異步調用的，引入方式如下：
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
這里需要注意一點官方提供是異步加載Google Maps JavaScript API，這樣會讓網站運行速率更高，但是這樣會有一個問題，就是在自己寫的js必須與引用在引入api之前，否則會報錯。由于項目中js api只能在自己寫的js的后面，所以只能使用同步的方式引入api js，引入方式如下：
<script src="https://maps.googleapis.com/maps/api/js?key=yourkey"></script>
這里的key是通過申請成為谷歌開發(fā)者然后獲取的密鑰。
創(chuàng)建地圖對象
地圖的 JavaScript 類是 Map 類。該類的對象定義頁面上的單個地圖。（創(chuàng)建該類的多個實例–每個對象都將定義頁面上的一個不同地圖。）我們利用 JavaScript new 運算符來新建該類。
//初次進入頁面只顯示首都不顯示坐標，只定義地圖
const map = new google.maps.Map(document.getElementById('map'), {
center: capitalLatLng,
zoom: mapZoom,
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
//禁用街景地圖
streetViewControl:false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//控制地圖類型控件的位置
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
});
- center：設置地圖初始化后中心點的位置，接受經緯度對象{lat: -25.363, lng: 131.044}
- zoom：地圖初始化后的縮放比例
- mapTypeId：設置地圖類型，這里設置的就是普通的街道地圖
- mapTypeControlOptions：修改地圖類型控件
谷歌地圖默認會顯示縮放控件（zoomControl），地圖類型控件（mapTypeControl），街景小人（streetViewControl），全屏按鈕（fullscreenControl，移動設備可見），除此之外還有旋轉控件（rotateControl，默認情況下，該控件是否顯示取決于給定地圖類型在當前的縮放級別和位置上是否存在 45° 圖像），比例控件（scaleControl，默認不顯示）。但是有些時候可能需要調節(jié)他們的位置或者是否顯示，可以通過相應的Options去控制，例如在上面初始化中，控制地圖類型控件的位置。
創(chuàng)建地圖marker
我們在創(chuàng)建好地圖后需要根據坐標去在地圖中標注出相應的位置（marker對象），創(chuàng)建方式如下：
//latlngArr為所地理位置數組
latlngArr.map((position, index) => {
let marker = new google.maps.Marker({
position,
zIndex: 0,
map
});
});
其中map為前面所創(chuàng)建的地圖，postion則為marker的坐標位置。
給marker添加事件
經常見到在點擊marker出現彈窗，這個效果可以通過給marker添加點擊事件
marker.addListener('click', function (e) {
map.setZoom(mapMaxZoom);
});
這里實現了一個點擊設置地圖放大到最大的效果，這里需要多說一句，就是在對象中的熟悉是可以通過set去設置的。
*設置marker自動居中
當設置了多個marker在地圖中后，會發(fā)現點擊某個不在中心的marker后，它并不會自動居中，這一點很不友好，為了設置點擊自動居中，需要添加如下代碼：
//map auto center
const bounds = new google.maps.LatLngBounds();
latlngArr.map((position, index) => {
let marker = new google.maps.Marker({
position,
icon: notSelect,
zIndex: 0,
map
});
bounds.extend(marker.position);
});
map.fitBounds(bounds);
map.panToBounds(bounds);
- 一個
LatLngBounds實例表示地理坐標中的矩形，包括穿過180度縱向子午線在內的矩形 -
LatLngBounds類下的extend方法用于擴展這個邊界以包含給定的點（marker） -
fitBounds設置視口包含給定的邊界
*設置地圖縮放自動調整
根據marker的分布自動調整地圖縮放比例是很常見的交互，Google Map API提供了panToBounds方法用于根據給定的LatLngBounds繪制出包含最小邊界的地圖，所以在代碼中只需要設置map.panToBounds(bounds)即可。
總結
真心覺得Google的文檔寫的很好，而且Google Map的功能很強大，我在項目中只是使用了些簡單的功能，更復雜功能請參考Google Map API：https://developers.google.com/maps/documentation/javascript/reference?csw=1
