Today when writing a small program detail page, I encountered a problem, the markers attribute of the map component is set by asynchronous request to the data, the result will lead to the bottom of the wechat rendering error. But if I initialize the markers variable in data first, every time the applet can not be rendered properly are initialized Beijing's data. Then wrote the following test:
：：
Page({
data:{
map:{
lat: 0,
lng: 0,
markers: [],
hasMarkers: false//prescription
}
},
onLoad: function(options){
var that=this;
({
type: 'wgs84', // default wgs84 come (or go) back gps coordinate (geometry)，gcj02 come (or go) back可用于 的coordinate (geometry)
success: function (res) {
// success
({
url: '/?vid=3&latlng=' + + ',' + ,
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // Set the requested header
success: function (res) {
// success
({
'': ,
'': ,
'': [{
latitude: ,
longitude: ,
name: ,
desc:
}],
'': true//prescription
});
();
}
})
}
})
}
});<view style="height: 100rpx;">
{{}}--{{}}--{{[0].name}}--{{[0].desc}}
</view>
<map latitude="{{}}" longitude="{{}}" markers="{{}}"></map>Test 1: The map variable is not initialized inside data
Test 2: Initialize the map variable and print out all the map data in wxml
Why is this happening? Various tests and finally realized that as long as it's not after a remote request in coming to set the map value there's no problem.
Later on, after the god netizen mentioned, due to the process of asynchronous setting value, the component has been rendered. But the map variable is not predefined is undefined state, map initialization can not get the data directly reported an error, and asynchronous over to the dynamic update led to the wxml need to re-render the map component of the situation led to. Because the official document has mentioned:
The latitude and longitude of the map component is required, if not, the default value is the latitude and longitude of Beijing. Markers can only be set during initialization, dynamic update is not supported.
It can only be initialized once, thus resulting in the initialization message being displayed each time.
Then, the solution given by the webmaster solved the problem perfectly:
wx:if will render the component a bit, so let's just add an if to him along those lines
<map markers="{{markers}}" style="width: 375px; height: 200px;" wx:if="{{map}}"></map>
The default map is false, that is, when loading does not render the map component, such as ajax back to set the map to true, so that the dynamic rendering of the address you want to
The final solution is as follows [thanks again for the great help from the great network]:
=============== 2018-04-16 Dividing Line ================
The issue is no longer found and the latest version of the applet map component is completely different. The desired text content needs to be customized. Please check the official documentation for details