当前位置：首页 > news >正文

微信小程序坐标位置使用整理(四)map组件

news 2025/9/14 8:02:36

一、地图上标点，marker

1.wxml

<map id="map" scale="9" class="map"markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}" show-location="{{true}}"><cover-view slot="callout"><cover-view wx:for="{{markers}}" wx:key="id" marker-id="{{item.id}}"></cover-view></cover-view>
</map>

2.wxss

// pages/map/map1/map1.js
Page({/*** 页面的初始数据*/data: {latitude: 36.40424100,longitude:  117.59074300,city: "济南",markers: [{"id": 22,"latitude": 36.40424100,"longitude": 117.59074300,"iconPath": "/style/img/index_p5.png","width": 20,"height": 20,"anchor": {"x": 0.5,"y": 1},"zIndex": 5,"callout": {"content": "雪野湖风景区","color": "#000000","fontSize": 20,"display": "BYCLICK","padding": 3}}, {"id": 119,"latitude": 36.56315200,"longitude": 117.07547900,"iconPath": "/style/img/index_p5.png","width": 20,"height": 20,"anchor": {"x": 0.5,"y": 1},"zIndex": 5,"callout": {"content": "777济南滑翔伞飞行营地","color": "#000000","fontSize": 20,"display": "BYCLICK","padding": 3}}, {"id": 120,"latitude": 36.47369800,"longitude": 117.11559300,"iconPath": "/style/img/index_p5.png","width": 20,"height": 20,"anchor": {"x": 0.5,"y": 1},"zIndex": 5,"callout": {"content": "金象山滑雪场","color": "#000000","fontSize": 20,"display": "BYCLICK","padding": 3}}, {"id": 121,"latitude": 36.41929600,"longitude": 117.13822000,"iconPath": "/style/img/index_p5.png","width": 20,"height": 20,"anchor": {"x": 0.5,"y": 1},"zIndex": 5,"callout": {"content": "九顶塔中华民族欢乐园·雪之舞滑雪场","color": "#000000","fontSize": 20,"display": "BYCLICK","padding": 3}}, {"id": 122,"latitude": 1.00000000,"longitude": 1.00000000,"iconPath": "/style/img/index_p5.png","width": 20,"height": 20,"anchor": {"x": 0.5,"y": 1},"zIndex": 5,"callout": {"content": "济南世纪园滑雪场","color": "#000000","fontSize": 20,"display": "BYCLICK","padding": 3}}],},/*** 生命周期函数--监听页面加载*/onLoad(options) {},
})

二、地图上展示范围，方圆范围，circle

特别说明：颜色设置使用十六进制模式，不然有的设备不兼容；例如：#077fff33，#000000

1.wxml

<map id="map" scale="15" class="map" circles="{{circles}}" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}"><cover-view slot="callout"><cover-view marker-id="1"></cover-view><cover-view marker-id="2"></cover-view></cover-view>
</map>

2.wxss

page{width: 100%;height: 100%;
}
map{width: 100%;height: 100%;
}

3.js

// pages/map/map2/map2.js
var longitude=116.92601214945981;
var latitude=36.666011687933405;
Page({/*** 页面的初始数据*/data: {latitude: latitude,longitude: longitude,jobID: 0,storeID: 0,storeInfo: {}, // 商家信息isSubmitting: false, // 添加提交状态标识circles: [{latitude: latitude,longitude: longitude,color: "#077fff33",fillColor: "#077fff33",radius: 500, // 500m打卡范围strokeWidth: 0,fillOpacity: 0.5,}],markers: [{id: 1,latitude: latitude,longitude: longitude,width: 20,height: 30,anchor: {x: .5,y: 1},zIndex: 5,callout: {content:  '千乐微云', // 显示商家名称color: '#000000',fontSize: 14,display: 'ALWAYS',padding: 3,}}],},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面显示*/onShow() {},
})

4.展示效果：