小程序map学习:使用map获取当前位置并显示出来
发布时间:2020-12-14 19:00:21 所属栏目:资源 来源:网络整理
导读:在小程序开发的过程中,我碰到过一个做map的需求,在我开发的时候我碰到了一些问题,这里总结出来,给大家一些解决方法。 简易小程序dome下载 代码片段分享: js部分: var amapFile = require('../../libs/amap-wx.js');//如:..-/..-/libs/amap-wx.jsPage(
在小程序开发的过程中,我碰到过一个做map的需求,在我开发的时候我碰到了一些问题,这里总结出来,给大家一些解决方法。 简易小程序dome下载 代码片段分享: js部分: var amapFile = require('../../libs/amap-wx.js');//如:..-/..-/libs/amap-wx.js
Page({
data: {
markers: [],latitude: '',longitude: '',textData: {},dome:false
},onLoad: 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 class="map_container">
<map class="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没反应,这里我的解决方法是直接重构,如果有其他大家欢迎大家在下面分享出来。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |