微信小程序地图的实现
实现效果图
不过我换是推荐看下官方文档,记得一定要看,很多属性要了解
实现代码:
wxml
<view class="page-body">
<map
id="map"
style="width:100%; height:{{Height}}px"
scale='16'
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
covers="{{covers}}"
bindmarkertap="bindmarkertap"
show-location="true"></map>
<cover-view class='cov_view'>
<cover-image src='../image/selectstar.png' class='cov_image' bindtap='click'></cover-image>
<cover-image src='../image/img1.jpg' class='center_image'></cover-image>
<cover-image src='../image/3.png'class='cov_image'bindtap='click' ></cover-image>
</cover-view>
</view>
wxss
.cov_view{
display: flex;
flex-direction: row;
justify-content: space-between;
height: 140rpx;
position: fixed;
bottom: 0;
right: 0;
left: 0;
margin-bottom: 50rpx;
}
.cov_image{
width: 100rpx;
height: 100rpx;
}
.center_image{
width: 300rpx;
height: 100rpx;
}
js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
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
// })
// },
// })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
地图上打点的事件属性
别的属性看看文档就行了