1、騰訊地圖注冊，獲取秘鑰

2、下載微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2

3、小程序引入并使用，下面是搜索地點顯示目標地圖代碼

js代碼

// 引入wx-jssdk import 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-jssdk import 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; }

?

?

總結

以上是生活随笔為你收集整理的微信小程序-地图map使用，周边公交地铁查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。