2025年微信小程序——地图（定位，多个标记点）

科技前沿 • 2025-03-13 22:24 • 阅读 34

大家好，我是讯享网，很高兴认识大家。

地图（定位，多个标记点）

效果图：
在这里插入图片描述
讯享网
.
.
.

使用的是微信自带的腾讯地图，
使用起来方便，简单，代码也很好理解
喜欢的朋友请收藏
.
.
.
.
.
.

.js代码：

Page({ 
    data: { 
    longitude: 113.14278, //地图界面中心的经度 latitude: 23.02882, //地图界面中心的纬度 markers: [ //标志点的位置 //位置0 { 
    id: 0, iconPath: "../images/1.png", latitude: 23.055, longitude: 113.273, width: 28, height: 32 }, //位置1 { 
    id: 1, iconPath: "../images/1.png", latitude: 23.072, longitude: 113.608, width: 28, height: 32 }, //位置2 { 
    id: 2, iconPath: "../images/1.png", latitude: 23.093, longitude: 113.229, width: 28, height: 32 }, //位置3 { 
    id: 3, iconPath: "../images/1.png", latitude: 23.087, longitude: 113.13, width: 28, height: 32 }, //位置4 { 
    id: 4, iconPath: "../images/1.png", latitude: 23.0694, longitude: 113.798, width: 28, height: 32 }, ] }, onLoad: function () { 
    var that = this; wx.getLocation({ 
    type: "wgs84", success: function (res) { 
    var latitude = res.latitude; var longitude = res.longitude; console.log("当前位置的经纬度为：", res.latitude, res.longitude); that.setData({ 
    latitude: res.latitude, longitude: res.longitude, }) } }) }, onReady: function () { 
    }, / * 地图放大缩小事件触发 * @param {*} e */ bindregionchange(e) { 
    console.log('=bindregiοnchange=', e) }, / * 点击地图事件，有经纬度信息返回 * @param {*} e */ bindtapMap(e) { 
    console.log('=bindtapMap=', e) } })

讯享网

.
.
.

.wxss代码：

讯享网page{ 
    height: 100%; }

.
.
.
.

.wxml代码：

<view class="" hover-class="none" hover-stop-propagation="false" style="width: 100%; height: 100%;"> <map id="map" longitude="{ 
   {longitude}}" latitude=" { 
   {latitude}}" markers="{ 
   {markers}}" scale="14" show-location style="width: 100%; height: 100%;" bindregionchange="bindregionchange" bindtap="bindtapMap"></map> </view>

.
.
.

app.json增加代码：

讯享网"permission": { 
    "scope.userLocation": { 
    "desc": "你的位置信息将用于小程序位置接口的效果展示" } },

图标 1.png
在这里插入图片描述

2025年微信小程序——地图（定位，多个标记点）

地图（定位，多个标记点）

.js代码：

.wxss代码：

.wxml代码：

app.json增加代码：

相关推荐