CoreThink&OpenCMF技术分享之：谷歌地图接入

其实如果产品涉及到国外，那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!'