点击信息列表中其中的一条信息,跳转到详情页,详情页中的地图,需要显示用户的发布的定位,数据库中有经纬度,那么如何使用数据库中的经纬度呢?问题展示如图:
wxml代码
<map class="map" longitude="{{recruit.location.longitude}}" latitude="{{recruit.location.latitude}}" show-location="true" scale="15" markers="{{markers}}"
>
{{recruit.location.name}}
</map>
js代码:
markers:[{
longitude:"recruit.location.longitude",
latitude:"recruit.location.latitude",
iconPath:"../../images/location.png"
}],
第一个渲染层错误,id是这个,建议为每个 marker 设置上 number 类型 id,保证更新 marker 时有更好的性能。
第二个渲染层错误,是这个。你可以试着填写一个宽度和高度,就不会显示这个渲染层错误了。
第三个渲染层错误,就是这两个值没获取到。
markers:[{ id: 0, // 建议为每个 marker 设置上 number 类型 id,保证更新 marker 时有更好的性能。 longitude: this.data.recruit.location.longitude, // 这里要读取到数据,number类型。看你wxml的写法,你的数据应该是在data里。 latitude: this.data.recruit.location.latitude, // 这里要读取到数据,number类型,不是用双引号引用。看你wxml的写法,你的数据应该是在data里。 iconPath:"../../images/location.png", }],
<map class="map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="15" markers="{{markers}}"
>
</map>
data: {
markers:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
const index = options.index;
const pages = getCurrentPages();
const indexpage = pages[0];
const recruits = indexpage.data.recruits;
const recruit = recruits[index];
const longitude=recruit.location.longitude;
const latitude=recruit.location.latitude;
console.log(recruit);
console.log(longitude);
console.log(latitude);
this.setData({
recruit:recruit,
longitude:longitude,
latitude:latitude,
markers:[
{
id:0,
longitude:longitude,
latitude:latitude,
iconPath:"../../images/location.png",
width:20,
height:20,
callout:{
content:"recruit.location.name",
color:'#ff3300',
fontSzie:12,
borderRadius:5,
borderWidth:1,
borderColor:'#bebebe',