相關(guān)文件與資料
JS文件
https://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN
http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN
開(kāi)發(fā)文檔（全英）
https://developers.google.com/maps/documentation/javascript/tutorial
1.谷歌地圖的使用
首先加載地圖的api拒迅，你可以指定所用語(yǔ)言挠他，如果沒(méi)指定，地圖將根據(jù)瀏覽器的語(yǔ)言（可通過(guò)請(qǐng)求的http頭的Accept-Language字段）自動(dòng)選用語(yǔ)言。還可以指定谷歌地圖的版本灯抛，現(xiàn)在最新版是ver=3.25，還可以加上一些指定的地圖的lib求橄。必填的參數(shù)是key镇匀，如果沒(méi)有key去谷歌地圖的開(kāi)發(fā)者頁(yè)面申請(qǐng)一個(gè)即可。大陸版的跟正常版的在使用上目測(cè)沒(méi)什么區(qū)別
2. 添加 Google 地圖 API Key
<!-- 中國(guó)版 -->
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyBp&language=zh-CN"></script>
<!--正常版免钻，需FQ -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBp"></script>
或者通過(guò)npm命令安裝
將google生成的 API key 放置于 key 參數(shù)中(key=YOUR_API_KEY)彼水。 The sensor 參數(shù)是必須的，該參數(shù)用于指明應(yīng)用程序是否使用一個(gè)傳感器 (類似 GPS 導(dǎo)航) 來(lái)定位用戶的位置极舔。參數(shù)值可以設(shè)置為 true 或者 false凤覆。
3.地圖 DOM 元素
<!-- 在頁(yè)面寫一個(gè)div，作為地圖的容器拆魏，可通過(guò)style指定地圖的寬高 -->
<div id="mapCanvas"></div>
要想在網(wǎng)頁(yè)上顯示地圖盯桦，我們必須為其預(yù)留一個(gè)位置。我們通常的實(shí)現(xiàn)方式是：創(chuàng)建一個(gè)命名的 div 元素渤刃，然后在瀏覽器的文檔對(duì)象模型 (DOM) 中獲取對(duì)該元素的引用拥峦。
4.創(chuàng)建一個(gè) Map 對(duì)象
初始化谷歌地圖，最主要的兩個(gè)參數(shù)是傳一個(gè)中心點(diǎn)和縮放倍數(shù)溪掀，如果你點(diǎn)地圖右下角的+號(hào)事镣，就會(huì)再放大一倍，這里的放大倍數(shù)就指這個(gè)
// 創(chuàng)建地圖實(shí)例
this.map = ''
this.map = new google.maps.Map(document.getElementById('mapCanvas'), { // 在map_canvas中生成一個(gè)實(shí)例地圖
center: this.mapCenter, // 中心點(diǎn)
zoom: 11, // zoom是縮放比例揪胃，以中心點(diǎn)放大多少倍
mapTypeId: google.maps.MapTypeId.ROADMAP, // 地圖展示的類型
})
center（中心點(diǎn)）：中心屬性指定了地圖的中心璃哟，該中心通過(guò)坐標(biāo)（緯度，經(jīng)度）在地圖上創(chuàng)建一個(gè)中心點(diǎn)喊递。
Zoom（縮放級(jí)數(shù)）：zoom 屬性指定了地圖的 縮放級(jí)數(shù)随闪。zoom: 0 顯示了整個(gè)地球地圖的完全縮放。
MapTypeId（地圖的初始類型）：mapTypeId 屬性指定了地圖的初始類型骚勘。mapTypeId包括如下四種類型：
google.maps.MapTypeId.HYBRID：顯示衛(wèi)星圖像的主要街道透明層
google.maps.MapTypeId.ROADMAP：顯示普通的街道地圖
google.maps.MapTypeId.SATELLITE：顯示衛(wèi)星圖像
google.maps.MapTypeId.TERRAIN：顯示帶有自然特征（如地形和植被）的地圖
5. 定義地圖屬性
this.markersList.forEach((item, key) => { // this.markers表示所有的標(biāo)記點(diǎn)位置
let marker = this.setAllMarkers(key, false)
google.maps.event.addListener(marker, 'click', this.clickMarker(marker, key, this))
// 劃過(guò)坐標(biāo)點(diǎn)事件
this.hoverChange(marker, key)
})
// 初始化右鍵地圖
let ContextMenuControlDiv = document.createElement('DIV') // 創(chuàng)建一個(gè)地圖上的盒子
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(ContextMenuControlDiv) // 地圖上控制新增圖層的位置
this.createColorMenu(ContextMenuControlDiv, this) // 添加地圖的右擊事件
// 初始化左鍵地圖
google.maps.event.addListener(this.map, 'click', this.hideColorMenu)
自定義樣式marker
這里所有的樣式都是谷歌自帶的铐伴，假設(shè)這個(gè)marker的樣式跟網(wǎng)站的風(fēng)格不太一致撮奏，我想要自定義一個(gè)marker不用谷歌自帶的，那怎么辦呢当宴？在上面new一個(gè)marker的時(shí)候可以再傳一個(gè)icon的參數(shù)畜吊，自定義icon，同時(shí)這個(gè)icon需要使用svg的格式户矢。
在PSD里面將UI里面的icon形狀導(dǎo)成一個(gè)AI文件玲献，然后再用AI導(dǎo)出svg，就有了icon的svg格式梯浪。打開(kāi)svg文件捌年，將里面的path、fill等作為地圖icon的參數(shù)挂洛，如下：
private pointStyle(color, ifSelect) { // 坐標(biāo)點(diǎn)樣式設(shè)置
if (!color) color = '#7B7D7B'
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0', // 原始點(diǎn)位置
fillColor: color, // 標(biāo)記點(diǎn)填充的顏色
fillOpacity: 1, // 標(biāo)記點(diǎn)填充顏色的透明度
strokeColor: ifSelect ? '#000' : color, // 標(biāo)記點(diǎn)邊框的顏色
strokeWeight: 2, // 標(biāo)記點(diǎn)邊框的大小
scale: 0.7, // 標(biāo)記點(diǎn)的大小
}
}
//通過(guò)調(diào)用去改變
this.pointStyle(userGpsVo.color, ifS elect), // 坐標(biāo)點(diǎn)的樣式設(shè)置
鼠標(biāo)點(diǎn)擊事件
clickMarker(marker, key, _this) { // 左鍵點(diǎn)擊坐標(biāo)點(diǎn)觸發(fā)事件
this.hideColorMenu()
return () => {
if (marker.ifSelect) {
marker.setMap(null) // 刪除原坐標(biāo)點(diǎn)
marker = _this.setAllMarkers(key, false) // 重新創(chuàng)建坐標(biāo)點(diǎn)
// 刪除原來(lái)存放起來(lái)的點(diǎn)
let index = _this.selectPointLists.findIndex(val => val.key === key)
_this.selectPointLists.splice(index, 1)
} else { // 表示原坐標(biāo)點(diǎn)未選中礼预，因?yàn)闄z查并且選中
marker.setMap(null)
marker = _this.setAllMarkers(key, true)
_this.selectPointLists.push({
key,
marker,
})
}
_this.hoverChange(marker, key)
google.maps.event.addListener(marker, 'click', _this.clickMarker(marker, key, _this))
}
}
鼠標(biāo)劃過(guò)事件
hoverChange(marker, key) { // 劃過(guò)坐標(biāo)點(diǎn)事件
let orderInfoVo = this.markersList[key].orderInfoVo
let ifBind = false
if (marker.icon.fillColor !== '#7B7D7B') ifBind = true
marker.hoverContent = new google.maps.InfoWindow({content: this.hoverContentDiv})
google.maps.event.addListener(marker, 'mouseover', () => {
this.hoverContentInfo = {
totalVolume: orderInfoVo.totalItemVolume,
messengerName: orderInfoVo.messengerUserName,
plateNo: orderInfoVo.vehiclePlateNo,
ifBind,
}
this.hoverContentDiv.style.display = 'block'
marker.hoverContent.open(this.map, marker)
})
google.maps.event.addListener(marker, 'mouseout', () => {
this.hoverContentDiv.style.display = 'none'
marker.hoverContent.close()
})
}
右擊事件
createColorMenu(controlDIV, _this) { // 右擊創(chuàng)建顏色選擇器菜單
controlDIV.appendChild(this.colorSettingOptionsDiv)
/* 給整個(gè)地圖增加右鍵事件監(jiān)聽(tīng) */
google.maps.event.addListener(this.map, 'rightclick', (event: any) => {
if (_this.selectPointLists.length > 0) {
this.colorSettingOptionsDiv.style.left = (event.pixel.x - 190) + 'px' // 平移顯示以對(duì)應(yīng)右鍵點(diǎn)擊坐標(biāo)
this.colorSettingOptionsDiv.style.top = event.pixel.y + 'px'
this.colorSettingOptionsDiv.style.display = 'block'
}
})
}
