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

• 效果图
  
  

• 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;
}

• js

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,
        })
    },


})

js中的请求方法，我这边是统一封装的，你们可以换成原生wx.request请求方法。