微信小程序切图之简单的地图实现,附代码片段
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
标签:微信小程序切图