微信小程序地图控件Map的使用

本文介绍微信小程序map控件的使用
map为原生控件之一……
介绍完map控件之后下面直接来看代码怎么实现吧

首先wxml文件(极简)：

<map id="map" scale="16" controls="{{controls}}" markers="{{markers}}" bindmarkertap="markertap" show-location longitude='{{centerX}}' latitude='{{centerY}}' class='mapv'>
</map>

<view class='contentv'>
  <image class='headimg' src='{{shop_image}}' mode='aspecFill'></image>
  <view class='item_meddle_one'>{{shop_name}}</view>
</view>

.wxss文件：

    <map id="map" scale="16" controls="{{controls}}" markers="{{markers}}" bindmarkertap="markertap" show-location longitude='{{centerX}}' latitude='{{centerY}}' class='mapv'>
    </map>
    
    <view class='contentv'>
      <image class='headimg' src='{{shop_image}}' mode='aspecFill'></image>
      <view class='item_meddle_one'>{{shop_name}}</view>
    </view>

然后是.js文件（里面的数据集合可以使你自己接口返回的数据，在此我先写在文件里，下面会把数据文件也发出来）

    var fileData = require('../../../utils/maplist.js')
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        showData: fileData.mtData().list,

    centerX: 114.4801638035,
    centerY: 38.0407364515,
    markers: [],
    controls: [{
      id: 1,
      position: {
        left: 0,
        top: 10,
        width: 40,
        height: 40
      },
      clickable: true
    }],
    shop_image: "",
    shop_name: "",
      },

      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log('地图定位！')
        let that = this
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log(res)
        let latitude = res.latitude;
        let longitude = res.longitude;

        that.setData({
          centerX: longitude,
          centerY: latitude,
        })
        that.requestshoplist();
      },
      fail: (res) => {
        that.requestshoplist();
      }
    });


      },

 

     /**
       * 获取门店列表数据
       */
      requestshoplist: function () {
        let that = this
    let markers = [];
    for (let i = 0; i < that.data.showData.length; i++) {
      let marker = that.createMarker(that.data.showData[i]);
      markers.push(marker)
    }

    let shopitem = that.data.showData[0]

    that.setData({
      markers: markers,
      shop_image: shopitem.shop_image,
      shop_name: shopitem.shop_name,
    })
      },
      /**
       * 创建marker对象
       */
      createMarker(point) {
        let marker = {
          iconPath: "../../../images/dp-gl.png",
          id: point || 0,
          name: point.shop_name || '',
          latitude: point.lat,
          longitude: point.lng,
          width: 30,
          height: 30,
        };
        return marker;
      },
    
      /**
       * 点击marker
       */
      markertap: function (shopitem) {
        let that = this
        that.setData({
          shop_image: shopitem.markerId.shop_image, 
          shop_name: shopitem.markerId.shop_name,
        })
      },
    })

本地数据 maplist.js

    module.exports = {
      mtData: mtData
    }
    var mt_data = mtData()
    
    function mtData() {
      var arr = {
        list: [{
          "lng": "114.45935721282069",
          "shop_name": "汽车维修养护中心",
          "shop_image": "http://app.hbxinguo.com:8085/proImage/1511943489545.jpg",
          "lat": "38.00812762499023"
        }, {
          "lng": "114.468121",
          "shop_name": "车库红旗店",
          "shop_image": "http://app.hbxinguo.com:8085/proImage/1502075526147.png",
          "lat": "38.0034"
        }, {![在这里插入图片描述](https://img-blog.csdnimg.cn/bf41b471fe2e43adba21e7b062d1aacc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5oqA5pyv56uZ,size_12,color_FFFFFF,t_70,g_se,x_16#pic_center)

          "lng": "114.471768",
          "shop_name": "桥西区汽车养护中心",
          "shop_image": "http://app.hbxinguo.com:8085/proImage/1512635314849.png",
          "lat": "37.999924"
        }]
      }
      return arr
    }