在小程式開發的程序中,我碰到過一個做map的需求,在我開發的時候我碰到了一些問題,這里總結出來,給大家一些解決方法,
簡易小程式dome下載
代碼片段分享:
js部分:
var amapFile = require('../../libs/amap-wx.js');//如:..-/..-/libs/amap-wx.js
Page({
data: {
markers: [],
latitude: '',
longitude: '',
textData: {},
dome:false
},
onl oad: function() {
var that = this;
wx.getLocation({
type: 'wgs84',
success: (res) => {
console.log(res);
that.setData({
latitude: res.latitude,
longitude: res.longitude
})
var marker = [{
id: 1,
latitude: res.latitude,
longitude: res.longitude,
iconPath: "../../images/marker.png",
width: 22,
height: 32,
callout: {
content: "你的位置\n換行內容",
color: "#333333",
fontSize: 13,
borderRadius: 20,
bgColor: "#ffffff",
textAlign: "center" ,
padding: 10,
display: 'ALWAYS'
}
}]
that.setData({
markers: marker
});
that.setData({
dome: true
});
},
});
},
})
頁面部分
<view >
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="11" markers="{{markers}}" wx:if="{{dome}}"></map>
</view>
css部分
.map_container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:750rpx;
height: 100vh;
}
map{
width:100%;
height: 100%;
}
遇到的問題:看上面的代碼,大家可以發現,我的map是用if來控制的,這樣是為了防止markers動態更新后map沒反應,這里我的解決方法是直接重構,如果有其他大家歡迎大家在下面分享出來,
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/214039.html
標籤:JavaScript
