微信小程序切图之简单的地图实现，附代码片段

wxml

<map
id="map"
style="width:100%; height:{{Height}}px"
scale='10'
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
covers="{{covers}}"
bindmarkertap="bindmarkertap"
show-location="true"></map>

 

js

// index.js
// 获取应用实例
const app = getApp()

Page({


		
		//地图设置
    Height:0,
    latitude: '31.216540',
    longitude: '121.522170',
    markers: [
      {
      id: 1,
      latitude: 31.216150,
      longitude: 121.522200,
      iconPath: '/image/location.png' 
    },
 
     {
        id: 2,
       latitude: 31.216045,
       longitude: 121.521025,
        iconPath: '/image/location.png'
      },
 
       {
         id: 3,
         latitude: 31.217747,
         longitude: 121.522533,
         iconPath: '/image/location.png'
      }
    ],
  },
  bindmarkertap:function(res){
    console.log(res)
    wx.showToast({
      title: '点击了'+res.markerId,
    })
  },
  
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          Height: res.windowHeight
        })
       console.log(that.data.Height)
      },
    })
 
  //  wx.getLocation({
  //    type: 'wgs84', //返回可以用于wx.openLocation的经纬度
  //    success: function(res) {
  //      console.log(res)
  //      that.setData({
  //        latitude:res.latitude,
  //        longitude:res.longitude
  //      })
  //    },
  //  })
 
  },
  getUserInfo(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

本文由专业的WEB前端外包公司-切图网原创，转载请保留版权（ WEB前端开发外包www.qietu.com ）切图网始于2007年，提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询！热线：027-81777732、13343477732

标签：微信小程序切图