Vue项目-使用Google谷歌地图

相关文件与资料

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
开发文档（全英）
https://developers.google.com/maps/documentation/javascript/tutorial

1.谷歌地图的使用

首先加载地图的api，你可以指定所用语言，如果没指定，地图将根据浏览器的语言（可通过请求的http头的Accept-Language字段）自动选用语言。还可以指定谷歌地图的版本，现在最新版是ver=3.25，还可以加上一些指定的地图的lib。必填的参数是key，如果没有key去谷歌地图的开发者页面申请一个即可。大陆版的跟正常版的在使用上目测没什么区别

2. 添加 Google 地图 API Key

<!-- 中国版 -->
<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>
或者通过npm命令安装

将google生成的 API key 放置于 key 参数中(key=YOUR_API_KEY)。 The sensor 参数是必须的，该参数用于指明应用程序是否使用一个传感器 (类似 GPS 导航) 来定位用户的位置。参数值可以设置为 true 或者 false。

3.地图 DOM 元素

<!-- 在页面写一个div，作为地图的容器，可通过style指定地图的宽高 -->
<div id="mapCanvas"></div>

要想在网页上显示地图，我们必须为其预留一个位置。我们通常的实现方式是：创建一个命名的 div 元素，然后在浏览器的文档对象模型 (DOM) 中获取对该元素的引用。

4.创建一个 Map 对象

初始化谷歌地图，最主要的两个参数是传一个中心点和缩放倍数，如果你点地图右下角的+号，就会再放大一倍，这里的放大倍数就指这个

        // 创建地图实例
        this.map = ''
        this.map = new google.maps.Map(document.getElementById('mapCanvas'), {   // 在map_canvas中生成一个实例地图
            center: this.mapCenter,   // 中心点
            zoom: 11,   // zoom是缩放比例，以中心点放大多少倍
            mapTypeId: google.maps.MapTypeId.ROADMAP,   //  地图展示的类型
        })

center（中心点）：中心属性指定了地图的中心，该中心通过坐标（纬度，经度）在地图上创建一个中心点。
Zoom（缩放级数）：zoom 属性指定了地图的 缩放级数。zoom: 0 显示了整个地球地图的完全缩放。
MapTypeId（地图的初始类型）：mapTypeId 属性指定了地图的初始类型。mapTypeId包括如下四种类型：
google.maps.MapTypeId.HYBRID：显示卫星图像的主要街道透明层
google.maps.MapTypeId.ROADMAP：显示普通的街道地图
google.maps.MapTypeId.SATELLITE：显示卫星图像
google.maps.MapTypeId.TERRAIN：显示带有自然特征（如地形和植被）的地图

5. 定义地图属性

        this.markersList.forEach((item, key) => { // this.markers表示所有的标记点位置
            let marker = this.setAllMarkers(key, false)
            google.maps.event.addListener(marker, 'click', this.clickMarker(marker, key, this))
            // 划过坐标点事件
            this.hoverChange(marker, key)
        })
        // 初始化右键地图
        let ContextMenuControlDiv = document.createElement('DIV')  // 创建一个地图上的盒子
        this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(ContextMenuControlDiv)  // 地图上控制新增图层的位置
        this.createColorMenu(ContextMenuControlDiv, this)   // 添加地图的右击事件
        // 初始化左键地图
        google.maps.event.addListener(this.map, 'click', this.hideColorMenu)

自定义样式marker

这里所有的样式都是谷歌自带的，假设这个marker的样式跟网站的风格不太一致，我想要自定义一个marker不用谷歌自带的，那怎么办呢？在上面new一个marker的时候可以再传一个icon的参数，自定义icon，同时这个icon需要使用svg的格式。

在PSD里面将UI里面的icon形状导成一个AI文件，然后再用AI导出svg，就有了icon的svg格式。打开svg文件，将里面的path、fill等作为地图icon的参数，如下：

private pointStyle(color, ifSelect) {  // 坐标点样式设置
    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',  // 原始点位置
        fillColor: color,   // 标记点填充的颜色
        fillOpacity: 1,   // 标记点填充颜色的透明度
        strokeColor: ifSelect ? '#000' : color,  // 标记点边框的颜色
        strokeWeight: 2,  // 标记点边框的大小
        scale: 0.7,   // 标记点的大小
    }
}
//通过调用去改变
this.pointStyle(userGpsVo.color, ifS  elect),   // 坐标点的样式设置

鼠标点击事件

clickMarker(marker, key, _this) {  // 左键点击坐标点触发事件
    this.hideColorMenu()
    return () => {
        if (marker.ifSelect) {
            marker.setMap(null)  // 删除原坐标点
            marker = _this.setAllMarkers(key, false)  // 重新创建坐标点
            // 删除原来存放起来的点
            let index = _this.selectPointLists.findIndex(val => val.key === key)
            _this.selectPointLists.splice(index, 1)
        } else {  // 表示原坐标点未选中，因为检查并且选中
            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))
    }
}

鼠标划过事件

hoverChange(marker, key) {  // 划过坐标点事件
    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) {    // 右击创建颜色选择器菜单
    controlDIV.appendChild(this.colorSettingOptionsDiv)
    /* 给整个地图增加右键事件监听 */
    google.maps.event.addListener(this.map, 'rightclick', (event: any) => {
        if (_this.selectPointLists.length > 0) {
            this.colorSettingOptionsDiv.style.left = (event.pixel.x - 190) + 'px'    // 平移显示以对应右键点击坐标
            this.colorSettingOptionsDiv.style.top = event.pixel.y + 'px'
            this.colorSettingOptionsDiv.style.display = 'block'
        }
    })
}