前言:
最近需要使用微信小程序开发新项目,其中一项需求,便是使用微信内置地图实现点对点定位以及导航功能,在这简单记录一下。
一、map组件初步了解:
首先我们要在自己的wxml页面中引入map组建,代码如下:
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" circles="{{circles}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregiοnchange="regionchange" show-location style="width: 100%; height: {{view.Height}}px;"></map>
现将自己的位置假设为A,要去的位置为B有以下注意事项:
1.logitude、latitude为A的经纬度;
2.scale是地图缩放级别;
3.controls是放置在地图上的按键,如可以在地图上放置+,-按钮,调用方法来控制map组件缩放级别;
4. markers是B的位置,需要传入
4.1 id(唯一值且为数字),
4.2 title(B位置的名称,如肯打鸡)
4.3 iconPath(B位置的坐标ICON图,如箭头,原点之类的);
4.4 longitude(B位置的经度)
4.5 latitude(B位置的纬度)
4.6 clickable(为true时表示B位置可以点击)
注意上述参数开头都是小写字母!以数组形式传给markers,一个位置为一个对象。
5.ciroles是A所在地的范围(定位不准确的情况下容差值);
6.bindmarkertap是点击B时的事件
7.polyline的作用是连接A与B之间距离的直线,实际情况来说并没有什么作用;
8.bindregionchange是在缩放级别发生改变的时候,所出发的事件
9.使用map组件时,height最好不要使用固定值,而是自动获取屏幕所剩区域高度,填充满所剩区域。
后续内容持续更新,如若有问题可在下方评论提出......