微信小程序-批量地图标记

article/2025/10/20 21:17:13

效果图
wxml

<loading hidden="{{!loading}}">加载中</loading><view class="mapBox"><map id="myMap" scale="12" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" show-location bindmarkertap="clickMarker"><cover-view class="sitePop_box" wx:if="{{sitePop}}"><cover-view class="siteCon"><cover-view class="siteIcon"><cover-image src="/images/siteIcon.png"></cover-image></cover-view><cover-view class="siteInfor"><cover-view class="siteName">{{siteData.title}}</cover-view><cover-view class="siteCount"><cover-view class="txt">已完成</cover-view><cover-view class="num">{{siteData.ok_huishou_num}}</cover-view><cover-view class="txt">单，</cover-view><cover-view class="num">{{siteData.ok_shoucang_num}}</cover-view><cover-view class="txt">人已收藏</cover-view></cover-view></cover-view><cover-view class="siteCollect" id="{{siteData.siteid}}" bindtap="collectTap"><cover-image src="/images/collect.png" wx:if="{{siteData.is_shoucang == 0}}"></cover-image><cover-image src="/images/collectAct.png" wx:else></cover-image></cover-view></cover-view><cover-view class="sitePost"><cover-view class="siteMore" id="{{siteData.siteid}}" bindtap="tapMore">查看更多</cover-view></cover-view></cover-view></map>
</view>

wxss

.mapBox {width: 100vw;height: 100vh;
}.mapBox map {width: 100%;height: 100%;
}/* 站点信息 */.sitePop_box {width: 710rpx;padding: 30rpx;box-sizing: border-box;background-color: #fff;border-radius: 20rpx;overflow: hidden;position: fixed;left: 0;right: 0;bottom: 30rpx;margin: 0 auto;z-index: 999;
}.siteCon {padding-bottom: 30rpx;overflow: hidden;
}.siteIcon {float: left;width: 100rpx;height: 100rpx;
}.siteInfor {float: left;width: 470rpx;margin: 0 20rpx;
}.siteInfor .siteName {font-size: 32rpx;font-weight: bold;color: #333;
}.siteInfor .siteCount {margin-top: 10rpx;
}.siteInfor .siteCount .txt {display: inline-block;color: #999;
}.siteInfor .siteCount .num {display: inline-block;color: #ff6268;
}.siteCollect {float: right;width: 40rpx;height: 40rpx;margin-top: 24rpx;
}.sitePost {padding-top: 30rpx;border-top: 1rpx solid #eee;overflow: hidden;
}.siteMore {width: 100%;height: 84rpx;line-height: 84rpx;text-align: center;color: #fff;font-size: 28rpx;font-weight: bold;background: #a8d153;border-radius: 42rpx;
}

var api = require('../../../sender/api.js')
var sender = require('../../../sender/sender.js')
var util = require('../../../utils/util.js')const app = getApp()var pages = 1;
var pages_size = 1000;Page({/*** 页面的初始数据*/data: {imgHost: api.API_IMG,loading: false,longitude : app.globalData.longitude,latitude: app.globalData.latitude,markers: [],siteList: [],siteData: {},sitePop: false,},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {var _this = this;_this.getSite();// 获取全局缓存console.log(app.globalData)},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 获取地图上的站点数据*/getSite: function() {var _this = this;sender.requestGET(api.Site_List, {longitude: app.globalData.longitude,latitude: app.globalData.latitude,},function(msg, resData, res) {console.log('==获取地图上的站点数据==')console.log(resData)var siteList = resData;var markers = _this.markers;for (var i = 0; i < siteList.length; i++) {var marker = {};marker['id'] = siteList[i]['siteid'];marker['latitude'] = siteList[i]['latitude'];marker['longitude'] = siteList[i]['longitude'];marker['width'] = 46;marker['height'] = 50;marker['iconPath'] = '/images/recoveryLoop.png';marker['label'] ={'content':siteList[i].title,'anchorX':-40,'anchorY':4,'textAlign':'center','bgColor':'#fff','padding':5,};markers[i] = marker;}// console.log(markers)_this.setData({markers: markers,siteList: siteList,})// 生成地图_this.mapCtx = wx.createMapContext('myMap');}, 1,function() {})},/*** 点击气泡*/clickMarker: function(e) {// console.log(e)var _this = this;var siteId = e.markerId;// console.log(siteId)_this.setData({loading: true,siteId: siteId});_this.getSiteDetail();},// 获取站点详情getSiteDetail: function() {var _this = this;var siteData = [];sender.requestGET(api.Site_Detail, {siteid: _this.data.siteId},function(msg, resData, res) {console.log(resData);_this.setData({siteData: resData,sitePop: true,loading: false,});}, 1,function() {})},// 收藏站点collectTap: function(e) {// console.log(e);var _this = this;var id = e.currentTarget.id;sender.requestPOST(api.Collect_Handle, {type: '3',ccid: id,},function(msg, resData, res) {console.log(res);wx.showToast({title: res.msg,icon: 'success',})// 刷新_this.getDetail();}, 1,function() {})},// 查看更多tapMore: function(e) {// console.log(e);var _this = this;var id = e.currentTarget.id;wx.navigateTo({url: '../siteDetail/siteDetail?id=' + id,})},})