小程序地图组件DEMO

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

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)