實現效果圖

?

不過我換是推薦看下官方文檔,記得一定要看,很多屬性要了解

實現代碼:

wxml

<view class="page-body"><mapid="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 = thiswx.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 () {}
})

地圖上打點的事件屬性

別的屬性看看文檔就行了

?

demo 地址如果幫助了希望給一個star

總結

以上是生活随笔為你收集整理的微信小程序地图的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。