相關(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è)面寫(xiě)一個(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'
        }
    })
}