经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
小程序map学习:使用map获取当前位置并显示出来
来源:cnblogs  作者:林恒  时间:2020/11/16 10:25:07  对本文有异议

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

原文链接:http://www.cnblogs.com/smileZAZ/p/13970550.html

 友情链接: NPS  问卷模板