亚洲精品亚洲人成在线观看麻豆,在线欧美视频一区,亚洲国产精品一区二区动图,色综合久久丁香婷婷

              當(dāng)前位置:首頁 > IT技術(shù) > 微信平臺 > 正文

              微信小程序map組件 markers 展示當(dāng)前位置&&修改標(biāo)記點圖標(biāo)
              2021-07-28 14:41:27

              當(dāng)前位置展示:

              微信小程序map組件 markers 展示當(dāng)前位置&&修改標(biāo)記點圖標(biāo)_map

              <view>
              	<map id="myMap" show-location class="container"  style="width: 100%; height: 800rpx;" />
              </view>
              
              onShow: function() {
              	this.mapCtx = wx.createMapContext('myMap')
              	this.mapCtx.moveToLocation()
              }
              

              改個標(biāo)記點的默認(rèn)樣式:
              微信小程序map組件 markers 展示當(dāng)前位置&&修改標(biāo)記點圖標(biāo)_map_02
              方法一

              <view>
              	<map id="myMap"  scale="16"  markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location style="width: 100%; height: 400px;"></map>
              </view>
              
              Page({
                data: {
              	markers: [{
              			iconPath: "../../static/images/home/icon.png",
              			longitude:121.45088,
              			latitude:31.25145,
              			id: 0,
              			width: 34,
              			height: 49
              		}]
                },
              	regionchange(e) {
              		console.log(e)
              	},
              	markertap(e) {
              		console.log(e)
              	},
                onShow: function () {
              	  this.mapCtx = wx.createMapContext('myMap')
              	  this.mapCtx.moveToLocation()
              	  
              	  const lat= "markers[0].latitude";
              	  const log= "markers[0].longitude";
              	  var that = this;
              	  wx.getLocation({
              	    type: "wgs84",
              	    success: function(res){
              	      that.setData({
              	     [lat]:res.latitude,
              	  	 [log]:res.longitude
              	      })
              	    }
              	  })
                }
              })
              
              

              方法二

              <view>
              	<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16"  markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location style="width: 100%; height: 400px;"></map>
              </view>
              
              Page({
                data: {
              			longitude:121.45088,
              			latitude:31.25145,
              	markers: [{
              			iconPath: "../../static/images/home/icon.png",
              			longitude:121.45088,
              			latitude:31.25145,
              			id: 0,
              			width: 34,
              			height: 49
              		}]
                },
              	regionchange(e) {
              		console.log(e)
              	},
              	markertap(e) {
              		console.log(e)
              	},
                onShow: function () {
              	  const lat= "markers[0].latitude";
              	  const log= "markers[0].longitude";
              	  var that = this;
              	  wx.getLocation({
              	    type: "wgs84",
              	    success: function(res){
              	      that.setData({
              	       latitude: res.latitude,
              	       longitude: res.longitude,
              	       [lat]:res.latitude,
              	  	   [log]:res.longitude
              	      })
              	    }
              	  })
                }
              })
              
              

              ?

              本文摘自 :https://blog.51cto.com/u

              開通會員,享受整站包年服務(wù)立即開通 >