先看下效果吧
首先进行公众号的常规开发，引入jssdk，相关配置代码如下
引入后可以使用微信内置定位功能，获取用户经纬度
重点！引入腾讯地图JS API 点击查看腾讯javascript API
在index.html页引入jsapi
(key需要自己去腾讯地图官网申请奥，否则鉴权不通过，不能进行接下来的开发)
创建一个需要用的地图的组件，设置地图宽高
js相关代码如下
// 初始化地图initMap() {this.mapSetting = {Map: qq.maps.Map, // 构建map的集合Marker: qq.maps.Marker, // 地图中的标记LatLng: qq.maps.LatLng, // 地图中的经纬度Event: qq.maps.event, // 地图事件MVCArray: qq.maps.MVCArray, // 地图中的可变数组MarkerCluster: qq.maps.MarkerCluster // 地图中点聚合(标记聚合)}this.center = new this.mapSetting.LatLng(this.position.latitude, this.position.longitude)var options = {'zoom': 11,'center': this.center,'mapTypeId': 'roadmap'}// 创建map地图this.map = new this.mapSetting.Map(document.getElementById('map'), options)// map的 infothis.info = new qq.maps.InfoWindow({map: this.map})// 调用this.createCluster()this.initEvent()},// 地图事件initEvent() {// 地图缩放事件// info.open('zoomLevel: ' + map.getZoom())this.info.setPosition(this.center)this.mapSetting.Event.addListener(this.map, 'zoom_changed', () => {// todo 缩放时 分页请求// const zoomLevel = map.getZoom()this.map.setCenter(this.center)// info.setContent('zoomLevel: ' + zoomLevel)})// 点击点聚合clusterer(聚类器)this.mapSetting.Event.addListener(this.markerClusterer, 'clusterclick', function(evt) {// console.log('e', evt)})},// 创建makerscreateCluster() {if (this.map == null) {return}var markers = new this.mapSetting.MVCArray()for (var i = 0; i < this.testData.length; i++) {const latLng = new this.mapSetting.LatLng(this.testData[i][0], this.testData[i][1])var marker = new this.mapSetting.Marker({'position': latLng,map: this.map})// 获取标记的点击事件this.mapSetting.Event.addListener(marker, 'click', () => {this.showInfo = truethis.info.open()this.info.setContent(this.divInfo)this.info.setPosition(latLng)})markers.push(marker)}this.markerClusterer = new this.mapSetting.MarkerCluster({map: this.map,minimumClusterSize: 8, // 默认2markers: markers,zoomOnClick: true, // 默认为truegridSize: 30, // 默认60averageCenter: true, // 默认falsemaxZoom: 18 // 默认18})}
