前置工作
-
注册登录及入口
登录 高德地图官网 - 开发支持 - 微信小程序SDK -
控制台 - 应用管理 - 我的应用 - 创建应用 - 应用下添加新的KEY以及信息
添加key
-
小程序开发者后台 - 开发管理 - 服务器域名 - 添加高德地图域名白名单
https://restapi.amap.com -
下载高德地图SDK文件 - 引入amap-wx.js文件到需要添加地图的js内
-
获取用户坐标权限
在app.json中，添加获取目标位置的权限：
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
正式接入
在小程序目标页面 - 引入amap-wx.js文件后 - 通过上面的key来实例化地图
var amapFile = require('../../resources/js/amap-wx.js');
var myAmapFun = new amapFile.AMapWX({ key: 上面应用下的key });
基本结构
<map
id="map"
class="mapEle"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="16"
show-location="true"
markers="{{markers}}"
polyline="{{polyline}}"
bindmarkertap="makertapFn"
show-scale="true"
></map>
通过myAmapFun可以实现的基本功能：
- 获取用户所在地区的基本信息
getRegeoFn(){
var that = this;
myAmapFun.getRegeo({
success: function(data){
if(data[0]){
var _yourCity = data[0].regeocodeData.addressComponent.province;
that.setData({
yourCity: _yourCity
});
}
},
fail(err){
console.log(err)
}
})
}
- 获取目标经纬度位置的周边关键词（美食、酒店、景区等）信息
myAmapFun.getPoiAround({
iconPathSelected: '../../resources/images/marker_checked.png',
iconPath: '../../resources/images/marker.png',
querykeywords: '美食',
location: '纬度,经度 ',
success(data){
var markersData = data.markers;
that.setData({
markers: markersData,
markPointIndex: 0,
latitude: markersData[0].latitude,
longitude: markersData[0].longitude
});
},
fail(info) {
wx.showModal({ title: info.errMsg })
}
});
- 针对上述map组件事件bindmarkertap， 周边来做mark点击切换
其实就是获取周边目标数组的一个filter操作，筛选条件就是目标点 id
makertapFn(ev){
var that = this;
var _markerId = ev.detail.markerId;
var markersData = that.data.markers;
var resEle = null;
var _index = 0;
//1. 获取markerId点的索引
markersData.forEach((item,index)=>{
if(item.id == _markerId){
resEle = item;
_index = index;
}
});
//切换MARK
setTimeout(()=>{
that.changeMarkerColor(markersData, 0);
},300)
}
//筛选mark点状态切换
changeMarkerColor(data, i){
var that = this;
var markers = [];
for (var j = 0; j < data.length; j++) {
if (j == i) {
data[j].iconPath = "../../resources/images/marker_checked.png";
} else {
data[j].iconPath = "../../resources/images/marker.png";
}
markers.push(data[j]);
}
that.setData({
markers: markers
});
}
- 通过 myAmapFun.getDrivingRoute 绘制路线与计算路程
需要对线路进行处理，显示行驶的路线说明文字
//绘制驾车路线
drawDrivingPolylineFn(){
var that = this;
var markersData = that.data.markers;
var _userLocal = that.data.userLocal;
var _markPointIndex = that.data.markPointIndex;
myAmapFun.getDrivingRoute({
origin: `${_userLocal.longitude},${_userLocal.latitude}`,
destination: `${markersData[_markPointIndex].longitude},${markersData[_markPointIndex].latitude}`,
success: function(data){
var points = [];
if(data.paths && data.paths[0] && data.paths[0].steps){
var steps = data.paths[0].steps;
for(var i = 0; i < steps.length; i++){
var poLen = steps[i].polyline.split(';');
for(var j = 0;j < poLen.length; j++){
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
})
}
}
}
that.setData({
drivingSteps: steps,
polyline: [{
points: points,
color: "#0091ff",
width: 4
}]
});
if(data.paths[0] && data.paths[0].distance){
that.setData({
distance: data.paths[0].distance
});
}
},
fail(err){
console.log(err);
}
})
}
- 绘制公交线路，如果跨域城市则需要 获知两个城市的名称
//绘制公交路线 -- 跨城（city,cityd必填）
drawBusPolylineFn(){
var that = this;
var markersData = that.data.markers;
var _userLocal = that.data.userLocal;
var _markPointIndex = that.data.markPointIndex;
var _yourCity = '北京市';
var _targetCity = '江苏';
myAmapFun.getTransitRoute({
origin: `${_userLocal.longitude},${_userLocal.latitude}`,
destination: `${markersData[_markPointIndex].longitude},${markersData[_markPointIndex].latitude}`,
strategy: 0,
city:_yourCity,
cityd: _targetCity,
success: function(data){
var points = [];
if(data && data.transits){
var transits = data.transits;
for(var i = 0; i < transits.length; i++){
var segments = transits[i].segments;
transits[i].transport = [];
for(var j = 0; j < segments.length; j++){
if(segments[j].bus && segments[j].bus.buslines && segments[j].bus.buslines[0] && segments[j].bus.buslines[0].name){
var name = segments[j].bus.buslines[0].name
if(j!==0){
name = '--' + name;
}
transits[i].transport.push(name);
}
}
}
}
that.setData({
transits: transits
});
//处理距离与路线
if(transits.length>0){
var _distance = transits[0].distance;
var _segments = transits[0].segments;
for(var i=0; i<_segments.length; i++){
if(_segments[i].bus.buslines[0] && _segments[i].bus.buslines[0].polyline){
var poLen = _segments[i].bus.buslines[0].polyline.split(';');
for(var j =0; j<poLen.length; j++){
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
})
}
}
}
that.setData({
distance: _distance,
polyline: [{
points: points,
color: "#0091ff",
width: 4
}]
});
}
},
fail(err){
console.log(err);
}
})
}
- 获取某地天气
需要创建一个WEB类型的key
城市编码表 下载地址
实时天气 参数说明
例子：
吴江区
adcode citycode
320509 0512
请求方式 --- GET
https://restapi.amap.com/v3/weather/weatherInfo?key=申请的web类型KEY&city=320509&extensions=base
网友评论