微信小程序地图控件Map的使用

article/2025/10/21 0:35:34

本文介绍微信小程序map控件的使用
map为原生控件之一……
介绍完map控件之后下面直接来看代码怎么实现吧
和往常一样，这些代码贴过去就可以直接通用的

在这里插入图片描述

首先wxml文件(极简)：

<map id="map" scale="16" controls="{{controls}}" markers="{{markers}}" bindmarkertap="markertap" show-location longitude='{{centerX}}' latitude='{{centerY}}' class='mapv'>
</map><view class='contentv'><image class='headimg' src='{{shop_image}}' mode='aspecFill'></image><view class='item_meddle_one'>{{shop_name}}</view>
</view>

.wxss文件：

    <map id="map" scale="16" controls="{{controls}}" markers="{{markers}}" bindmarkertap="markertap" show-location longitude='{{centerX}}' latitude='{{centerY}}' class='mapv'></map><view class='contentv'><image class='headimg' src='{{shop_image}}' mode='aspecFill'></image><view class='item_meddle_one'>{{shop_name}}</view></view>

然后是.js文件（里面的数据集合可以使你自己接口返回的数据，在此我先写在文件里，下面会把数据文件也发出来）

var fileData = require('../../../utils/maplist.js')Page({/*** 页面的初始数据*/data: {showData: fileData.mtData().list,centerX: 114.4801638035,centerY: 38.0407364515,markers: [],controls: [{id: 1,position: {left: 0,top: 10,width: 40,height: 40},clickable: true}],shop_image: "",shop_name: "",},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log('地图定位！')let that = thiswx.getLocation({type: 'gcj02',success: (res) => {console.log(res)let latitude = res.latitude;let longitude = res.longitude;that.setData({centerX: longitude,centerY: latitude,})that.requestshoplist();},fail: (res) => {that.requestshoplist();}});},/*** 获取门店列表数据*/requestshoplist: function () {let that = thislet markers = [];for (let i = 0; i < that.data.showData.length; i++) {let marker = that.createMarker(that.data.showData[i]);markers.push(marker)}let shopitem = that.data.showData[0]that.setData({markers: markers,shop_image: shopitem.shop_image,shop_name: shopitem.shop_name,})},/*** 创建marker对象*/createMarker(point) {let marker = {iconPath: "../../../images/dp-gl.png",id: point || 0,name: point.shop_name || '',latitude: point.lat,longitude: point.lng,width: 30,height: 30,};return marker;},/*** 点击marker*/markertap: function (shopitem) {let that = thisthat.setData({shop_image: shopitem.markerId.shop_image, shop_name: shopitem.markerId.shop_name,})},})

本地数据 maplist.js

    module.exports = {mtData: mtData}var mt_data = mtData()function mtData() {var arr = {list: [{"lng": "114.45935721282069","shop_name": "汽车维修养护中心","shop_image": "http://app.hbxinguo.com:8085/proImage/1511943489545.jpg","lat": "38.00812762499023"}, {"lng": "114.468121","shop_name": "车库红旗店","shop_image": "http://app.hbxinguo.com:8085/proImage/1502075526147.png","lat": "38.0034"}, {![在这里插入图片描述](https://img-blog.csdnimg.cn/bf41b471fe2e43adba21e7b062d1aacc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5oqA5pyv56uZ,size_12,color_FFFFFF,t_70,g_se,x_16#pic_center)"lng": "114.471768","shop_name": "桥西区汽车养护中心","shop_image": "http://app.hbxinguo.com:8085/proImage/1512635314849.png","lat": "37.999924"}]}return arr}