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