1、腾讯地图注册，获取秘钥
2、下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2
3、小程序引入并使用，下面是搜索地点显示目标地图代码
js代码
// 引入wx-jssdkimport QQMapWX from '../../../utils/qqmap-wx-jssdk.min.js';var qqmapsdk;Page({data:{},onLoad: function(){var _this = this,searchName = '海淀黄庄地铁站';qqmapsdk = new QQMapWX({key: '秘钥'});qqmapsdk.geocoder({address: '北京市' + searchName,success: function (res) {console.log('suc', res);// res.result.location 为地点的经纬度var point = res.result.location;_this.setData({point: point ,markers: [{iconPath: '/img/location.png',id: 0,latitude: point.lat,longitude: point.lng,title: searchName,width: 30,height: 30,callout: {content: searchName,color: '#333',fontSize: 14,padding: 8,display: 'ALWAYS',textAlign: 'center'}}]})},fail: function (res) {console.log('fail', res);},complete: function (res) {console.log('complete', res);}})},})
wxml代码
<!-- longitude 中心经度latitude 中心纬度markers 标记点enable-zoom 缩放enable-scroll 拖动 --><mapid="map"longitude="{{point.lng}}"latitude="{{point.lat}}"scale="13"markers="{{markers}}"enable-zoom="{{false}}"enable-scroll="{{true}}"style="width: 100%; height: 500rpx;"></map>
4、搜索周边
js代码
// 引入wx-jssdkimport QQMapWX from '../../../utils/qqmap-wx-jssdk.min.js';var qqmapsdk;Page({data:{aroundType: [{ text: "公交" }, { text: "医院" }, { text: "商场" }, { text: "学校" }, { text: "银行" }, { text: "美食" }],currentInd: -1},onLoad: function(){var _this = this,searchName = '海淀黄庄地铁站';qqmapsdk = new QQMapWX({key: '秘钥'});qqmapsdk.geocoder({address: '北京市' + searchName,success: function (res) {console.log('suc', res);// res.result.location 为地点的经纬度var point = res.result.location;var marker = {iconPath: '/img/location.png',id: 0,latitude: point.lat,longitude: point.lng,title: searchName,width: 30,height: 30,callout: {content: searchName,color: '#333',fontSize: 14,padding: 8,display: 'ALWAYS',textAlign: 'center'}}_this.setData({point: point ,markers: [marker],locMarker: marker})},fail: function (res) {console.log('fail', res);},complete: function (res) {console.log('complete', res);}})},getKeyword(e): {var index = e.currentTarget.dataset.index;this.setData({currentInd: index})this.getAround(this.data.aroundType[index].text);},getAround( keyword ){var _this = this,location = _this.data.point.lat + ',' + _this.data.point.lng;// 搜索周边方法qqmapsdk.search({keyword: keyword,location: location,success: function(res) {console.log(res);var markers = [], num = 1;markers.push(_this.data.locMarker);for (var o of res.data){markers.push({iconPath: '/img/location.png',id: num++,latitude: o.location.lat,longitude: o.location.lng,title: o.title,width: 30,height: 30,callout: {content: o.title,color: '#333',fontSize: 14,padding: 8,display: 'BYCLICK',textAlign: 'center'}})}},fail: function(){}})}})
wxml代码
<mapid="map"longitude="{{point.lng}}"latitude="{{point.lat}}"scale="15"markers="{{markers}}"></map><view class="catalog"><block wx:for="{{aroundType}}" wx:key=""><view bindtap="getType" data-index="{{index}}" class="item {{currentInd==index?'active':''}}">{{item.text}}</view></block></view>
wxss代码
map{width: 100%;height: calc( 100vh - 90rpx);}.catalog{position: fixed;bottom: 0;left: 0;width: 100%;height: 90rpx;background: #000;}.catalog .item{float: left;width: 16.6666%;color: #fff;text-align: center;font-size: 30rpx;line-height: 90rpx;}.catalog .item.active{background: #de3435;}
