故事背景：
大多数人想吃饭的的时候想看看附近有什么好吃的饭馆，或者附近有哪些店家，现在一般的导航地图只有显示地名和店铺，又不知道该店铺评价和消费怎么样。
需求 ：
一个功能打开可以看到附近的店铺，点击店铺标识可以看到该店铺的评价和消费水平。
原型 ：
image.png
代码：
wxml
<map
id="myMap"
style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;" latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
show-location
bindmarkertap="selectMarket"
include-points="{{markers}}"
bindmarkertap="toaddress"
>
</map>
js
Page({
/**
* 页面的初始数据
*/
data: {
latitude: 22.542581,
longitude: 114.122618,
markers: [
{
id: 0,
latitude: 22.542581,
longitude: 114.122618,
// alpha:0,
iconPath: '/image/shop.png',
// width: 35,
// height: 35,
// label: {
// content: '深圳站', //文本
// color: '#FF0202', //文本颜色
// borderRadius: 3, //边框圆角
// borderWidth: 1, //边框宽度
// borderColor: '#FF0202', //边框颜色
// bgColor: '#ffffff', //背景色
// padding: 5, //文本边缘留白
// anchorX:-10,
// textAlign: 'center' //文本对齐方式。有效值: left, right, center
// },
callout: {
display: 'ALWAYS',
content: '深圳站寿司 \n\n', //文本
color: '#FF0202', //文本颜色
borderRadius: 3, //边框圆角
borderWidth: 1, //边框宽度
padding: 10, //文本边缘留白
textAlign: 'center', //文本对齐方式。有效值: left, right, center
// anchorY: 100,
// anchorX: 50,
// display: 'ALWAYS',
}
},
{
id: 1,
// 114.063402, 22.530831
latitude: 22.530831,
longitude: 114.063402,
callout: {
content: " 深圳福田火锅 \n \n",
padding: 10,
display: 'ALWAYS',
textAlign: 'center',
// anchorY: 100,
// anchorX: 50,
}
},
],
mapWidth: '',
mapHeight: ''
},
toaddress: function (e) {
console.log(e)
var id = e.markerId
console.log(id)
// 跳转到某店铺
console.log("跳转到店铺详情")
// wx.openLocation({
// latitude: this.data.markers[id].latitude,
// longitude: this.data.markers[id].longitude,
// })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var sy = wx.getSystemInfoSync(),
mapWidth = sy.windowWidth * 2,
mapHeight = sy.windowHeight * 2;
this.setData({
mapWidth: mapWidth,
mapHeight: mapHeight
})
},
})
