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

一、地圖上標點，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.展示效果：