使用地图本身的map组件实现地图
初始化地图：
<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" bindtap='handlerMap' enable-satellite="{{satellite}}" scale="{{scale}}" circles="{{circles}}" markers="{{markerData}}" polyline="{{polyline}}" polygons="{{polygons}}" enable-zoom="{{true}}" rotate="{{0}}" show-compass="{{true}}" />map组件的属性
| longitude |
必须 |
Number |
中心点经度 |
| latitude |
必须 |
Number |
中心点纬度 |
| scale |
选填 |
Number |
地图的缩放级别（缩放切换时使用） |
| include-points |
选填 |
Array. |
缩放视野以展示所有坐标点 |
| markers |
选填 |
Array. |
地图展示的坐标点集合 |
| polyline |
选填 |
Array. |
地图展示的线路集合 |
| circles |
选填 |
Array. |
地图展示的圆的集合 |
| polygons |
选填 |
Array. |
地图展示的多边形的集合 |
| rotate |
选填 |
Number（0-360） |
地图旋转的角度 |
| show-compass |
选填 |
true/false |
展示指南针 |
| enable-zoom |
选填 |
true/false |
缩放（默认true） |
| enable-scroll |
选填 |
true/false |
拖动（默认true） |
| enable-satellite |
选填 |
true/false |
是否开启卫星地图（切换地图图层使用） |
| bindtap |
选填 |
eventhandle |
点击地图触发的事件 |
| bindmarkertap |
选填 |
eventhandle |
点击坐标点触发 |
以上是map组件的部分属性，我在开发过程中用到的一部分以及我觉得可能会用到的。
如果只是简单的展示地图，只需要两个参数即可：
<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" /> Page({ data:{ longitude:116.39479288997632, latitude:40.0772127801174, } })需要什么功能我们往里边添加即可
添加缩放控件：scale 有两个属性：min-scale最小缩放（默认3）、max-scale最大缩放（默认20）
<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}"/> <view bindtap='handBScale'> <img src="../../imgs/" />
</view> <view bindtap='handSScale'>
<img src="../../imgs/" />
</view>
Page({
data:{
longitude:116.39479288997632,
latitude:40.0772127801174,
scale：10,
},
handBScale(){
let scale=
scale++
if(scale>20)scale=20 //当scale突破20之后，虽然地图并没有继续放大，但是绑定的值是在增大的，如果不管当你缩小的时候，会出现失效的情况
({ scale:scale })
},
handBScale(){
let scale=
scale--
if(scale<3)scale=3//同放大
({ scale:scale })
}
})ok，这样就完成了一个缩放的功能，因为微信的map组件没有自带的缩放控件，所以需要自己单独写一个。当然我相信样式对各位是小意思，所以我就不写了。QAQ
接下来是点线面的实现，因为地图并没有点击滑动划线的方法（我没找到）。点线面都是由点击实现，这样的话点线面是连贯实现。
<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}"
markers="{{markers}}" polyline="{{polyline}}" polygons="{{polygons}}"
bindtap="handTap"
/>
<view class="body-view">
<slider bindchange="slider3change" min="200" max="30200" value="200" show-value/>
</view>
Page({
data:{
longitude:116.39479288997632,
latitude:40.0772127801174,
scale：10,
marker:null,//改变圆半径时圆心的坐标点
markers:[],
polyline:[],
polygons:[],
markerId:1
},
handTap(event){
let lnglat=
let marker = (lnglat)
let markers=
(marker) //push是不断给地图添加坐标点，如果只需要一个，直接赋值即可
({
marker:marker,
markers:markers
})
let circle=(marker,200)
let circles=[]
(circle)
({
longitude:, //画圆时需要把圆心定为地图的中心，不画圆可以不要
latitude:
scale:16,
circles:circles
})
if(>1){
let polyline=(markers)
let polylines=[]
(polyline)
({
polyline:polylines
})
}
if(>2){
let polygon=(markers)
let polygons=[]
(polygon)
({
polygons:polygons
})
}
},
slider3change(event){
let value=
let marker=
if(marker==null)return
let circle=(marker,value)
let circles=[]
let scale=0
if(value<500){
scale=16
}else if(value<1000){
scale=14
}else if(value<5000){
scale=12
}else if(value<10000){
scale=10
}else if(value<35000){
scale=9
}else{
scale=12
}
(circle)
({
circles:circles,
scale:scale
})
},
generateMarker(data){ //创建坐标点的函数
let longitude=||
let latitude=||
let markerId=
let iconPath="../../imgs/"
let marker={
longitude:longitude, //必填经度
latitude:latitude, //必填纬度
iconPath:iconPath, //必填图标路径
id:markerId, //选填点位id，id作为唯一的标识符，我觉得填上会好点，可以不填。
width:20, //图片的宽度，默认为实际宽度
height:20, //图片的高度，默认为实际高度
anchor:{ //图标的中心点（0-1选值）
x:.5,
y:.5
}
}
({
markerId:markerId++ //每次生成坐标点给这个值加1，保证点位内的id唯一性
})
return marker
},
generatePolyline(data=[]){ //创建线条
let polyline={}
let points=[]
for(let ite of data){
({
longitude:,
latitude:
})
}
polyline={
points:points, //坐标点集合
color:"#333333", //线条的颜色
colorList:[], //彩虹线，使用时会忽略color的值
width:5, //线条的宽度
dottedLine:true, //是否虚线
//arrowLine:false, //是否有箭头
//arrowIconPath:'', //箭头更换时的图标地址，arrline为true时生效
//borderColor:'blue', //线条边框的颜色
//borderWidth:3, //线条边框的宽度
abovelabels:'abovelabels' //压盖层级：('aboveroads':道路之上楼块之下，'abovebuildings':楼块之上POI之下，'abovelabels':所有的POI之上，默认是这个)
}
return polyline
},
generatePolygon(data){ //创建多边形
let polygon={}
let points=[]
for(let ite of data){
({
longitude:,
latitude:
})
}
polygon={
points:points, //坐标点集合
dashArray:[10,10], //描边线默认为实线，如果需要虚线使用这个属性，接收两个值的数组，分别是实线和虚线的长度
strokeWidth:4, //描边的宽度
strokeColor:"#555555", //描边的颜色,只接受16进制和RGBA格式
fillColor:"rgba(152,132,152,.5)", //多边形围绕成的空间的填充色
zindex:4, //多边形z轴数值
level:'abovelabels' //压盖层级
}
return polygon
},
generateCircle(marker,radius){ //创建圆
let circle={
longitude:, //圆中心坐标点的经度
latitude:, //圆中心坐标点的纬度
radius:radius, //圆的半径
color:'#555555', //描边颜色
fillColor:'#666666', //填充颜色
strokeWidth:3, //描边宽度
level:'abovelabels' //压盖层级
}
return circle
}
})以上就是点、线、面的实现。