最近在做一个地图相关的小程序，已经完工，这里和大家分享下

1、index.wxml

<view class='index-hd'>XX地图</view>

<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>

非常简单的写法，没什么名堂

2、index.wxss

.index-hd {
  padding: 5rpx;
  text-align: center;
}

样式也很简单

3、index.js

重点和功能在这里边

Page({

    data: {
 
    latitude: 22.46770600000,//纬度
    longitude: 109.9233160000,//经度
    markers: [//markers参数配置
    
//项目开始
     {
        //iconPath:"../../resource/images/lgzy.png",
        id: 1,
        latitude: 28.4772780000,//纬度
        longitude:119.9528090000,//经度
        // alpha:0,
        callout:{
          content: "项目名称",
          bgColor:'#FF6600',//背景颜色
          color: '#FFFFFF',//文字颜色
          padding:5,//内容与边框边距
          display:'ALWAYS',
          textAlign:'center',//文本对齐
          borderRadius: 10,//圆角边框
          borderColor:'#FF6600',//边框颜色
          borderWidth: 2,//边框粗细
 
      },
 
//项目结束
    ],
    mapWidth:'',
    mapHeight:''
  },

//end data
//这个页面分享给其他好友显示的标题和图片
  onShareAppMessage: function () {
    return {
      title: '标题',
      imageUrl: '../../resource/images/sharemap.png'
    }
  },
  //点击markers，通过对应ID传参，执行跳转到目标页面
  toaddress:function(e){
    console.log(e)
    var id =e.markerId
    console.log(id)
      /*跳转到目标位置
   */
    //wx.openLocation({
    //  latitude: this.data.markers[id].latitude,
    //  longitude: this.data.markers[id].longitude,
    // })
    wx.navigateTo({
      //url: '../../pages/index/index',
      url: '../../pages/jump/index?id='+ id,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
 
  /**
   * 跳转到目标位置
   */
   /*
 getLocation:function(){
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        wx.openLocation({//使用微信内置地图查看位置。
          latitude: 31.0938140000,//要去的纬度-地址
          longitude: 121.5039390000,//要去的经度-地址
          name: "O'MALL华侨城商业中心",
          address: '华侨城商业中心'
        })
      }
    })
  },
*/
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var sy = wx.getSystemInfoSync(),
        mapWidth = sy.windowWidth*2,
        mapHeight = sy.windowHeight*2;
    this.setData({
      mapWidth:mapWidth,
      mapHeight:mapHeight
    })
       // text:"这是一个页面"
    imageSrc: '../../resource/images/default.jpg'
  },

  jumptoindex:function(){
    wx.navigateTo({
      url: '../../pages/index/index',
    })
  }//jumptoindex

})//page

4、效果图

5、参数说明

地图组件参数

markers参数