微信小程序map组件地图定位当前位置

article/2025/7/10 17:39:59

小程序map组件的应用方式：简单版

在这里插入图片描述

wxml:

<map id="map" latitude="{{latitude}}" longitude="{{longitude}}"  controls="{{controls}}" bindcontroltap="controltap"markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange"   scale="14"  show-location></map>

wxss:

page{ width: 100%; height:100%; }
#map{ width: 100%; height:100%; }

js:

data: {markers: [],  //地图参数：latitude: "", //纬度 longitude: "",  //经度},regionchange(e) {//console.log(e)},markertap(e) {//console.log(e)},controltap(e) {//console.log(e)},//获得地图getMyMap(e) {let that = this;//自行查询经纬度 http://www.gpsspg.com/maps.htmconst mapLatitude = 23.1194300000,mapLongitude = 113.3212200000;wx.getLocation({type: 'wgs84', success(res){// 当前自己的经纬度 res.latitude，res.longitudethat.setData({latitude: mapLatitude,longitude: mapLongitude,markers: [{id: "0",latitude: mapLatitude,longitude: mapLongitude,iconPath: "https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/map-ico.png",width: 40,height: 40,callout: {'display': 'ALWAYS', 'fontSize': '30rpx', 'content': '广州珠江新城','padding': '8rpx', 'boxShadow': '0 0 5rpx #333','borderRadius':'4rpx'}}],})}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getMyMap()},