一、地图上标点，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.展示效果：
三、
更多：
微信小程序坐标位置接口使用整理(二)地图插件_error: getwxplugincode fail,error: provider:wx50b5-CSDN博客