在开发中使用地图api的经验
谷歌地图
TIP
谷歌地图在国内因为限制的原因用的并不广泛，而且面临着以下几点问题：
- 需要有vpn才能访问外网地址
- 文档无中文支持
- 谷歌地图的开发者后台无法使用大陆手机号注册来获得
api_key
其中最难解决的是第三点，因为很难通过简单的方法来获得开发者验证。
以下就默认已经解决了以上的困难
如何去初始化谷歌地图
js
const googleKey = `your key`
const jsSrc = `https://maps.google.com.hk/maps/api/js?key=${googleKey}&language=zh-CN&libraries=places`
const script = document.createElement('script')
script.src = jsSrc
document.body.appendChild(script)
script.addEventListener('load', () => {
const map = new window.google.maps.Map(wrapDom, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
如何在项目中引入google map的类型提示
据我的使用体验，引入谷歌地图的ts类型提示和没有引入的开发体验天差地别
sh
npm i -D @types/google.maps
1
如何去画一个点
谷歌地图的点支持自定义图片，只需要传入坐标就能在对应的位置画上点。
如果使用谷歌地图的规划路线
路线规划可以使用两个坐标来规划，值得一提的是我在开发中遇到的者两个问题
- 屏蔽默认的marker 使用自己的起点和重点
- 更改线的颜色
javascript
const directionsRenderer = new google.maps.DirectionsRenderer({
suppressMarkers: true, // 不显示默认的点
polylineOptions: {
strokeColor: "#ff8700" // 更换线的颜色
}
})
1
2
3
4
5
6
2
3
4
5
6