其实如果产品涉及到国外，那Mapbox也是一个很好的选择，Google map在国内毕竟无法正常使用，关于mapbox的分享后面可以再做一下。欢迎交流，www.corethink.cn
谷歌地图接入指南 申请密钥
网页链接: https://developers.google.com/maps/documentation/javascript/?hl=zh-cn 引入Google地图
添加如下代码:
初始化地图
html中:
js中:
key=YOUR_API_KEY&callback=initMap"
async defer>
function initMap() {
}
var center = {lat: -34.397, lng: 150.644};
var map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 8
});
说明: 初始化地图其实是实例化了 google.maps.Map 类,并传入了两个参数,第一个参数是 要显示地图的Element,第二个参数是一系列的名值对,可以对地图实现自定义,详见: https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=zh- cn#MapOptions
实现其他功能
1. 给地图添加麻点 在initMap函数中添加:
说明: 添加麻点功能是实例化了 google.maps.Marker 类,参数同样是json格式,其中 position 是必须设定的,它表示麻点所在位置
2. 点击麻点显示信息窗口 在initMap函数中添加:
var content = ''
I'm infowindow!
';
var infowindow = new
google.maps.InfoWindow({ content:content
});
marker.addListener('click', function()
{ infowindow.open(map, marker);
});
说明: 创建信息窗口的过程是实例化了 google.maps.InfoWindow 类,参数中 content 表示 信息窗口中要显示的内容,可以是string也可以是html。然后给marker添加click事件,触发 infowindow的 open() 方法。
3. 周边设施 代码略长,未列出
说明: 搜索周边设施的功能是初始化了 google.maps.places.PlacesService 类,有一个 map参数,即要传入当前的地图,然后调用它的 nearbySearch() 方法,该方法有两个参数, 第一个参数是要请求的内容,以json格式传入,第二个参数是一个回调函数。 第一个参数详 见: https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=zh- cn#PlaceSearchRequest
var marker = new google.maps.Marker({
});
position:center,
map: map,
title: 'Hello World!'
