相关文件与资料
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'
}
})
}
