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

本文介绍微信小程序map控件的使用
map为原生控件之一……
介绍完map控件之后下面直接来看代码怎么实现吧
和往常一样,这些代码贴过去就可以直接通用的

微信小程序地图控件Map的使用_第1张图片

首先wxml文件(极简):





  
  {{shop_name}}

.wxss文件:





  
  {{shop_name}}

然后是.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"
    }, {
      "lng": "114.471768",
      "shop_name": "桥西区汽车养护中心",
      "shop_image": "http://app.hbxinguo.com:8085/proImage/1512635314849.png",
      "lat": "37.999924"
    }]
  }
  return arr
}

你可能感兴趣的:(小程序)