本文介紹微信小程序map控件的使用
map為原生控件之一……
介紹完map控件之后下面直接來看代碼怎么實現(xiàn)吧
和往常一樣，這些代碼貼過去就可以直接通用的

點擊地圖氣泡可實現(xiàn)界面數(shù)據(jù)交互

首先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文件：

.mapv {
  width: 100%;
  height: 83vh;
}

.headimg {
  width: 180rpx;
  height: 120rpx;
  margin-left: 20rpx;
  margin-top: 30rpx;
}

.contentv{
  display: flex;
  flex-direction: row;
  align-items: center;
}

然后是.js文件（里面的數(shù)據(jù)集合可以使你自己接口返回的數(shù)據(jù)，在此我先寫在文件里裂明，下面會把數(shù)據(jù)文件也發(fā)出來）

var fileData = require('../../../utils/maplist.js')
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  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: "",
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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();
      }
    });


  },

  /**
   * 獲取門店列表數(shù)據(jù)
   */
  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,
    })
  },

  /**
   * 創(chuàng)建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,
    })
  },
})

本地數(shù)據(jù) maplist.js

module.exports = {
  mtData: mtData
}
var mt_data = mtData()

function mtData() {
  var arr = {
    list: [{
      "lng": "114.45935721282069",
      "shop_name": "汽車維修養(yǎng)護中心",
      "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"
    }, {
      "lng": "114.471768",
      "shop_name": "橋西區(qū)汽車養(yǎng)護中心",
      "shop_image": "http://app.hbxinguo.com:8085/proImage/1512635314849.png",
      "lat": "37.999924"
    }]
  }
  return arr
}

至于氣泡配圖 emmm ……

dp-gl.png

如果對你有所幫助，打賞就不要了，點個喜歡吧硝训。