1.安装模块
npm add @amap/amap-jsapi-loader
2.加载高德地图需要的资源，组件初始化的时候
import AMapLoader from '@amap/amap-jsapi-loader';
3.配置 securityJsCode
window._AMapSecurityConfig = {
securityJsCode: 'c17d888e6146e49609c9833e8ff4c116'
}
4.初始化地图
initMap() {
AMapLoader.load({
// 申请好的Web端开发者Key，首次调用 load 时必填
key: "6135e881b5a30378a6c696316ddaab72",
// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
version: "2.0"
}).then((AMap) => {
//获取地图
this.map = new AMap.Map("map", { //设置地图容器id
mapStyle: 'amap://styles/whitesmoke',////设置地图的显示样式
zoom: 12///设置地图显示的缩放级别
});
}).catch(e => {
console.log('错误了', e);
})
},
5.商品订单-高德地图-物流轨迹
1）绘制路径 map 绘制到哪个地图上， showTraffic 是否先道路情况 参考示例 2）关闭 marker 标
记，自定义 marker
AMapLoader.load({
// 申请好的Web端开发者Key，首次调用 load 时必填
key: "6135e881b5a30378a6c696316ddaab7c",
// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
version: "2.0"
}).then((AMap) => {
//获取地图
this.map = new AMap.Map("map", { //设置地图容器id
mapStyle: 'amap://styles/whitesmoke',////设置地图的显示样式
zoom: 12,///设置地图显示的缩放级别
});
AMap.plugin('AMap.Driving', () => {//异步同时加载多个插件
// 获取规划路线的对象实例
var driving = new AMap.Driving({
map: this.map,
//设置是否显示实时路况信息，默认设置为true。
//显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。
showTraffic: false,
//设置隐藏路径规划的起始点图标 设置为true
hideMarkers: true
});
// 设置路线的起点和终点
let list = [...this.logistics.data]
let start = list.pop().areaCenter.split(',')//起点坐标位置
let startM = getMarker(start, this.startImg)//生成起点坐标标记
this.map.add(startM)//把标记带你添加到地图上
let end = list.shift().areaCenter.split(',')
let endM = getMarker(end, this.endImg)//生成终点坐标标记
this.map.add(endM)//把标记带你添加到地图上
// 处理途径坐标点[[112,34],[115,56]]
let pointArr = [...new Set(list.map(item => item.areaCenter))].reverse().map(item => item.split(','))
// 绘制路线的起点和终点
driving.search(start, end,
{ waypoints: pointArr },
(status, result) => {
})
});
}).catch(e => {
console.log('错误了', e);
})
6.商品订单-高德地图-绘制标记
AMapLoader.load({
// 申请好的Web端开发者Key，首次调用 load 时必填
key: "6135e881b5a30378a6c696316ddaab7c",
// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
version: "2.0"
}).then((AMap) => {
//获取地图
this.map = new AMap.Map("map", { //设置地图容器id
mapStyle: 'amap://styles/whitesmoke',////设置地图的显示样式
zoom: 12,///设置地图显示的缩放级别
});
AMap.plugin('AMap.Driving', () => {//异步同时加载多个插件
// 获取规划路线的对象实例
var driving = new AMap.Driving({
map: this.map,
//设置是否显示实时路况信息，默认设置为true。
//显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。
showTraffic: false,
//设置隐藏路径规划的起始点图标 设置为true
hideMarkers: true
});
// 创建标记函数
const getMarker = (point, image, width = 25, height = 30) => {
// 设置icon图标
const icon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(width, height),
// Icon的图像
image,
// 根据所设置的大小拉伸或压缩图片
imageSize: new AMap.Size(width, height)
})
// 设置对应坐标图标
const marker = new AMap.Marker({
position: [point[0], point[1]],
icon: icon,
offset: new AMap.Pixel(-width / 2, -height)
})
return marker
}
// 设置路线的起点和终点
let list = [...this.logistics.data]
let start = list.pop().areaCenter.split(',')//起点坐标位置
let startM = getMarker(start, this.startImg)//生成起点坐标标记
this.map.add(startM)//把标记带你添加到地图上
let end = list.shift().areaCenter.split(',')
let endM = getMarker(end, this.endImg)//生成终点坐标标记
this.map.add(endM)//把标记带你添加到地图上
// 处理途径坐标点[[112,34],[115,56]]
let pointArr = [...new Set(list.map(item => item.areaCenter))].reverse().map(item => item.split(','))
console.log(pointArr)
// 绘制路线的起点和终点
driving.search(start, end,
{ waypoints: pointArr },
(status, result) => {
// 运输位置
const curr = this.logistics.data.shift().areaCenter.split(',')
const currMarker = getMarker(curr, this.carImg, 33, 20)
this.map.add(currMarker)
// 3s后定位当中间进行缩放
setTimeout(() => {
this.map.setFitView([currMarker])//定位最后的地图视觉中心 覆盖物数组
this.map.setZoom(10)//最大 zoom 级别
}, 3000)
})
});
}).catch(e => {
console.log('错误了', e);
})
数据
logistics: {
"message": "ok",
"nu": "SF123456789",
"ischeck": "1",
"com": "shunfeng",
"status": "200",
"data": [
{
"time": "2023-07-10 15:01:53",
"context": "[滨州市]您的快件已签收，如有疑问请电联快递员【王振江，电话：15762154831】，感谢您使用顺丰，期待再次为您服务。（主单总件数：1件）",
"ftime": "2023-07-10 15:01:53",
"areaCode": "CN371600000000",
"areaName": "山东,滨州市",
"status": "签收",
"location": "滨州市",
"areaCenter": "117.970703,37.38199",
"areaPinYin": "bin zhou shi",
"statusCode": "3"
},
{
"time": "2023-07-10 14:30:51",
"context": "[滨州市]快件交给王振江，正在派送途中（联系电话：15762154831，顺丰已开启“安全呼叫”保护您的电话隐私,请放心接听！）（主单总件数：1件）受快件当前所在地高温天气影响,我们将合理调整快递员工作时段,预计上门收派时效会有所增加.午后烈日炎炎,也请您注意防晒防暑哦.",
"ftime": "2023-07-10 14:30:51",
"areaCode": "CN371623000000",
"areaName": "山东,滨州市,无棣县",
"status": "在途",
"location": "滨州市",
"areaCenter": "117.625696,37.77026",
"areaPinYin": "wu di xian",
"statusCode": "0"
},
{
"time": "2023-07-10 14:19:32",
"context": "[滨州市]我们正在为您的快件分配最合适的快递员，请您稍等。",
"ftime": "2023-07-10 14:19:32",
"areaCode": "CN371623000000",
"areaName": "山东,滨州市,无棣县",
"status": "在途",
"location": "滨州市",
"areaCenter": "117.625696,37.77026",
"areaPinYin": "wu di xian",
"statusCode": "0"
},
{
"time": "2023-07-10 14:17:15",
"context": "[滨州市]快件到达 【无棣店】",
"ftime": "2023-07-10 14:17:15",
"areaCode": "CN371623000000",
"areaName": "山东,滨州市,无棣县",
"status": "在途",
"location": "滨州市",
"areaCenter": "117.625696,37.77026",
"areaPinYin": "wu di xian",
"statusCode": "0"
},
{
"time": "2023-07-10 12:52:48",
"context": "[滨州市]快件已发车",
"ftime": "2023-07-10 12:52:48",
"areaCode": "CN371600000000",
"areaName": "山东,滨州市",
"status": "在途",
"location": "滨州市",
"areaCenter": "117.970703,37.38199",
"areaPinYin": "bin zhou shi",
"statusCode": "0"
},
{
"time": "2023-07-10 12:52:27",
"context": "[滨州市]快件在【滨州天工集分站】完成分拣，准备发往 【无棣店】",
"ftime": "2023-07-10 12:52:27",
"areaCode": "CN371600000000",
"areaName": "山东,滨州市",
"status": "在途",
"location": "滨州市",
"areaCenter": "117.970703,37.38199",
"areaPinYin": "bin zhou shi",
"statusCode": "0"
},
{
"time": "2023-07-10 09:45:56",
"context": "[滨州市]快件到达 【滨州天工集分站】",
"ftime": "2023-07-10 09:45:56",
"areaCode": "CN371600000000",
"areaName": "山东,滨州市",
"status": "在途",
"location": "滨州市",
"areaCenter": "117.970703,37.38199",
"areaPinYin": "bin zhou shi",
"statusCode": "0"
},
{
"time": "2023-07-10 05:36:36",
"context": "[济南市]快件已发车",
"ftime": "2023-07-10 05:36:36",
"areaCode": "CN370100000000",
"areaName": "山东,济南市",
"status": "在途",
"location": "济南市",
"areaCenter": "117.119999,36.651216",
"areaPinYin": "ji nan shi",
"statusCode": "0"
},
{
"time": "2023-07-10 05:12:01",
"context": "[济南市]快件在【济南虞山中转场】完成分拣，准备发往 【滨州天工集分站】",
"ftime": "2023-07-10 05:12:01",
"areaCode": "CN370100000000",
"areaName": "山东,济南市",
"status": "干线",
"location": "济南市",
"areaCenter": "117.119999,36.651216",
"areaPinYin": "ji nan shi",
"statusCode": "1002"
},
{
"time": "2023-07-10 04:54:10",
"context": "[济南市]快件到达 【济南虞山中转场】",
"ftime": "2023-07-10 04:54:10",
"areaCode": "CN370100000000",
"areaName": "山东,济南市",
"status": "在途",
"location": "济南市",
"areaCenter": "117.119999,36.651216",
"areaPinYin": "ji nan shi",
"statusCode": "0"
},
{
"time": "2023-07-09 23:41:09",
"context": "[廊坊市]快件已发车",
"ftime": "2023-07-09 23:41:09",
"areaCode": "CN131000000000",
"areaName": "河北,廊坊市",
"status": "在途",
"location": "廊坊市",
"areaCenter": "116.683752,39.538047",
"areaPinYin": "lang fang shi",
"statusCode": "0"
},
{
"time": "2023-07-09 22:02:57",
"context": "[廊坊市]快件在【廊坊开发区中转场】完成分拣，准备发往 【济南虞山中转场】",
"ftime": "2023-07-09 22:02:57",
"areaCode": "CN131000000000",
"areaName": "河北,廊坊市",
"status": "干线",
"location": "廊坊市",
"areaCenter": "116.683752,39.538047",
"areaPinYin": "lang fang shi",
"statusCode": "1002"
},
{
"time": "2023-07-09 21:12:11",
"context": "[廊坊市]快件到达 【廊坊开发区中转场】",
"ftime": "2023-07-09 21:12:11",
"areaCode": "CN131000000000",
"areaName": "河北,廊坊市",
"status": "在途",
"location": "廊坊市",
"areaCenter": "116.683752,39.538047",
"areaPinYin": "lang fang shi",
"statusCode": "0"
},
{
"time": "2023-07-09 18:57:05",
"context": "[廊坊市]快件已发车",
"ftime": "2023-07-09 18:57:05",
"areaCode": "CN131000000000",
"areaName": "河北,廊坊市",
"status": "在途",
"location": "廊坊市",
"areaCenter": "116.683752,39.538047",
"areaPinYin": "lang fang shi",
"statusCode": "0"
},
{
"time": "2023-07-09 18:46:15",
"context": "[廊坊市]快件在【东方大学城店】完成分拣，准备发往 【廊坊开发区中转场】",
"ftime": "2023-07-09 18:46:15",
"areaCode": "CN131000000000",
"areaName": "河北,廊坊市",
"status": "干线",
"location": "廊坊市",
"areaCenter": "116.683752,39.538047",
"areaPinYin": "lang fang shi",
"statusCode": "1002"
},
{
"time": "2023-07-09 16:13:52",
"context": "[廊坊市]顺丰速运 已收取快件",
"ftime": "2023-07-09 16:13:52",
"areaCode": "CN131000000000",
"areaName": "河北,廊坊市",
"status": "已揽收",
"location": "廊坊市",
"areaCenter": "116.683752,39.538047",
"areaPinYin": "lang fang shi",
"statusCode": "103"
}
],
"state": "3",
"condition": "F00",
"routeInfo": {
"from": {
"number": "CN131000000000",
"name": "河北,廊坊市"
},
"cur": {
"number": "CN371600000000",
"name": "山东,滨州市"
},
"to": {
"number": "CN371600000000",
"name": "山东,滨州市"
}
},
"isLoop": false
}
