小程序——地图标识，查找美团点评地图门店

故事背景：

大多数人想吃饭的的时候想看看附近有什么好吃的饭馆，或者附近有哪些店家，现在一般的导航地图只有显示地名和店铺，又不知道该店铺评价和消费怎么样。

需求 ：

一个功能打开可以看到附近的店铺，点击店铺标识可以看到该店铺的评价和消费水平。

原型 ：

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
    })
  },
})