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

在小程序开发的过程中，我碰到过一个做map的需求，在我开发的时候我碰到了一些问题，这里总结出来，给大家一些解决方法。

代码片段分享：

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没反应，这里我的解决方法是直接重构，如果有其他大家欢迎大家在下面分享出来。

巴特西

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

最新文章

热门文章