欢迎光临
我的个人博客网站

小程序map学习:使用map获取当前位置并显示出来

在小程序开发的过程中,我碰到过一个做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没反应,这里我的解决方法是直接重构,如果有其他大家欢迎大家在下面分享出来。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 小程序map学习:使用map获取当前位置并显示出来
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏