微信小程序：map组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ansheng02/article/details/81775263

        其实前些天，吴哥就说让我加上一个定位，我说我还没看文档，还没学，暂时没加。今天上午终于开始接受map组件的挑战，我不滴不说我真的是很懒，好吧，也有点会拒绝困难，但如果真的需要，我也可以去学习去解决，大概我的身边缺少一个让我有动力的吧，别问我今天怎么就写了啊，我只是不想让自己这样废了。

        言归正传，在定位上，微信小程序提供了map组件，截图来看下属性都有哪些，看下图，好吧，太长了，给你地址自己看吧。

        https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map

       在我的项目中，需要在买房购房的左上角加入map组件，显示实时定位。

        1.首先倒入一个定位图标，推荐阿里图标库http://www.iconfont.cn/

        2.给添加的图标加一个

catchtap="onMapTap"

        在JS页面加入：

  onMapTap:function(){  //点击跳转定位
    wx:wx.navigateTo({
      url: 'map/map',
    })
  },

       接下来就是map组件，在单独建立的map目录中，在wxml写入：

<map id='map' longitude='115.324520' scale='10' markers='{{markers}}' bindmarkertap='markertap' polyline='{{polyline}}' style='width:100%;height:300px;'></map>

      其中，longitude='115.324520'是指中心经度，就是当打开地图是，以该点为中心点；scale是指缩放级别，小程序里默认是16，在这我设置成了10；markers是标记点，一会儿放出来js代码，一看就明白了；bindmarkertap是点击标记点触发，返回marker的id，在这里，就返回id为0；polyline是指路线，一会看js代码。

    现在是map.js专场：

Page({
  data: {
    //地图
    markers: [{
      iconPath: "/images/map-dw.png",   //定位小图标
      id: 0,  
      latitude: 35.099994,      //中心经度
     longitude: 114.324520,     //中心纬度
      width: 50,      //小图标的宽
      height: 50      //小图标的高
    }],
    polyline: [{
      points: [{           //经纬度数组
        longitude: 114.3245211,
        latitude: 35.10229
      }, {
        longitude: 120.324520,
        latitude: 35.21229
      }],
      color: "#ff0000dd",
      width: 2,
      dottedLine: true
    }],
  },
  markertap(event) {
    wx: wx.openLocation({
      latitude: '35.10229',
      longitude: '114.324520',
    })
  }, 
})

        我jiao得我把这个组件写的还算清楚吧……算了，我自己也能看的明白。

        哦~对了，想做一个实现实时定位的，百度了下，是加入这个http://lbs.qq.com/qqmap_wx_jssdk/index.html，这个是腾讯地图专门提供给微信小程序的一个包，暂时还没开始安装这个，所以，等我做好了，再来写~

        切记，map在模拟运行的时候，并不能显示太多功能，只能在真机上运行时，才能看到更多更有趣~好了，我去试试这个实时定位。