小程序实现地图方面功能和代码示例

{  
 "usingComponents": {  
 "map": {  
 "sdk": "TencentMap",  
 "config": {  
 "appId": "你的腾讯地图AppID",  
 "secret": "你的腾讯地图Secret",  
 "code": "你的腾讯地图Code" 
 }  
 }  
 }  
}

<view class="container">  
 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" bindregionchange="regionchange">  
 <marker id="marker" latitude="{{latitude}}" longitude="{{longitude}}" bindtap="tapmarker"></marker>  
 </map>  
</view>

Page({  
 data: {  
 latitude: 23.099994,  
 longitude: 113.324520,  
 controls: [],  
 markers: []  
 },  
 onLoad: function () {  
 // 初始化地图  
 const mapCtx = wx.createMapContext('map');  
 // 获取用户当前位置  
 wx.getLocation({  
 success: (res) => {  
 this.setData({  
 latitude: res.latitude,  
 longitude: res.longitude  
 });  
 // 在地图上标注  
 const marker = {  
 id: 0,  
 latitude: res.latitude,  
 longitude: res.longitude,  
 width: 50,  
 height: 50,  
 color: 'red' 
 };  
 this.setData({ markers: [...this.data.markers, marker] });  
 }  
 });  
 },  
 // 控制缩放、移动、标注等功能  
 controltap: function () {  
 const controls = this.data.controls;  
 const mapCtx = wx.createMapContext('map');  
 controls.push({ id: controls.length, type: 'scale', value: controls.length % 2 === 0 ? 14 : 16 });  
 controls.push({ id: controls.length, type: 'rotate', value: controls.length % 2 === 0 ? 0 : 45 });  
 controls.push({ id: controls.length, type: 'center', value: { latitude: this.data.latitude, longitude: this.data.longitude } });  
 mapCtx.setControls(controls);  
 },  
 // 实现地图搜索功能（以地点搜索为例）  
 searchLocation: function () {  
 const that = this;  
 wx.showActionSheet({  
 itemList: ['搜索地点'],  
 success: function (res) {  
 if (res.tapIndex === 0) {  
 wx.navigateTo({ url: '/pages/search/search' });  
 }  
 }  
 });  
 },  
 // 实现地图导航功能（以路线规划为例）  
 navigate: function () {  
 const that = this;  
 wx.navigateTo({ url: '/pages/navigate/navigate' });  
 },  
 // 实现地图上标记点的点击事件（以弹出气泡为例）  
 tapmarker: function (e) {  
 const that = this;  
 wx.showToast({ title: e.markerId + '被点击了', icon: 'success', duration: 2000 });  
 },  
 // 实现地图区域变化事件（以更新区域信息为例）  
 regionchange: function (e) {  
 const that = this;  
 console.log(e); // 可根据需求打印相关信息，如经纬度、坐标系等。  
 }  
});