微信小程序地图map的markers属性polyline属性controls属性全解析教程

第一：JS页面

// pages/about/about.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    markers: [{ 
      iconPath: '../../images/logo.jpg',
      id: 0,
      latitude: 34.780254,
      longitude: 113.699559,
      width: 30,
      height: 30,
      title:"【软银科技】\n网络营销领导者，让公司业绩倍增\n倍增热线：15136135201",
      callout:{
        content:"【软银科技】\n网络营销领导者，让公司业绩倍增\n倍增热线：15136135201",
        color:"#2c8df6",
        fontSize:20,
        borderRadius:10,
        bgColor:"#fff",
        display:"ALWAYS",
        boxShadow:"2px 2px 10px #aaa"
        }, 
      label: {
        color: "#000",
        fontSize: 12, 
        content: "为标记点旁边增加标签",
        x: 34.780439,
        y: 113.699774
      }
    }],
    polyline: [{
      points: [{
        latitude: 34.780254,
        longitude: 113.699559
        
      }, {
          longitude: 113.701855,
        latitude: 34.779778
      }],
      color: "#ff6600",
      width: 2,
      dottedLine: false,
      arrowLine: true,
      borderColor:"#000",
      borderWidth:5
    }],
    controls: [{
      id: 1,
      iconPath: '../../images/icon_cate.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  //拨打手机号码
  makePhoneCall: function () {
    var that = this
    wx.makePhoneCall({
      phoneNumber: '15136135201',
      success: function () {
        console.log("成功拨打电话")
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

第二：wxml页面

<!--pages/about/about.wxml-->

 <map id="map" longitude="113.699559" latitude="34.780254" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregiοnchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

<button type="primary" bindtap="makePhoneCall">拨打</button>
 
<button open-type="contact">进入客服会话</button>