官方文档：
https://lbs.amap.com/api/javascript-api-v2/summary
API 文档 ：
http://https://lbs.amap.com/api/javascript-api-v2/documentation
个别接口有每日调用限制，如不满足使用需要购买服务包 流量限制说明-地图 JS API 2.0 | 高德地图API*
准备工作：
（注册成为高德开发者进入应用管理，创建新应用，新应用中添加 key，服务平台选择 Web端(JS API)）
具体示例：准备-地图 JS API 2.0 | 高德地图API
Web端使用:
安装高德地图加载器插件 ：
代码语言：bash复制npm i @amap/amap-jsapi-loader -S具体思路：VUE文件created中初始化调用
1、初始化加载地图方法
2、如需实时跟踪点位信息需要加上初始化动态刷新坐标的方法（可以采用前端页面轮询或后端Websocket主动发送的方式）（websocket参考上篇文章）
主要方法（初始化加载地图）
代码语言：javascript复制AMapLoader.load({
key: "xxxxxxxxxxxxxxxxxxxxxxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.InfoWindow', 'AMap.Marker', 'AMap.Polyline', 'AMap.Icon'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
this.map = new AMap.Map("container", { //设置地图容器id
viewMode: "2D", //是否为3D地图模式
zoom: 12, //初始化地图级别
center: [117.125809,36.679151], //初始化地图中心点位置
})
//这里添加需要的地图api、如下图完整代码
}).catch((error) => {
console.log("地图加载失败！",error);
});
},完整代码
代码语言：html复制<template>
<div>
<el-row>
<el-col :span="4">
<el-form ref="form" :model="form" label-width="120px">
<el-row>
<el-form-item label="监控类型：">
<el-select v-model="monitor" @change="handleChange" placeholder="选择监控车队" style="width: 150px">
<el-option
v-for="item in monitorOptions"
:key="item.carType"
:label="item.name"
:value="item.carType">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="厂区：">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model="checkedArea" @change="handleCheckedAreas">
<el-checkbox v-for="area in areaOptions" :label="area" :key="area">{{area}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="实时推送：">
<el-button :type="openWs?'danger':'primary'" size="small" @click="openWs?stopWS():openWS()">{{openWs?'关闭':'打开'}}</el-button>
</el-form-item>
</el-row>
</el-form>
</el-col>
<el-col :span="20">
<el-card id="container" class="container-amap">
</el-card>
</el-col>
</el-row>
<el-dialog
title="提示"
:visible.sync="logVisible"
width="500px">
<el-form ref="form" :model="formLog" label-width="80px">
<el-form-item label="日志">
<el-input type="textarea" v-model="formLog.log"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="logVisible = false">取 消</el-button>
<el-button type="primary" @click="logVisible = false">保 存</el-button>
</span>
</el-dialog>
</div>
<!-- <div id="container" class="container-amap">-->
<!-- </div>-->
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import carDirection from '@/assets/images/carDirection.png';
var ws = null;
export default {
name: "M50f01",
data() {
return {
map:null,//地图实例
infoWindow:null,//窗体实例
contextMenuPositon:null,//基点位置
form:{},
formLog:{
log:null
},
factoryArea:0,
checkAll: false,
checkedArea: ["一厂区","二厂区"],
areaOptions: ["一厂区","二厂区"],
isIndeterminate: true,
monitor:"00",//监控车队类型
monitorOptions:[
{
carType:"00",
name:"全部"
},
{
carType:"01",
name:"施工"
},
{
carType:"02",
name:"空车"
},
],
logVisible:false,
marker:null,
markers:[],
openWs:true,
}
},
created() {
//初始化Websocket服务
this.initWebSocket();
//初始化地图服务
this.init();
},
mounted() {
let that = this;
this.$notify({
title: '提示',
message: '车辆【京A·88888】进入施工区域',
duration: 0,
type: 'warning',
position:'bottom-right'
});
}, beforeDestroy() {
// 清除覆盖物/图层
// 清除地图实例上的所有 click 事件绑定
this.map.clearEvents('click');
// 注销地图对象，并清空地图容器
this.map.destroy()
},
methods:{
initWebSocket(){
let that = this;
ws = new WebSocket("ws://IP:端口/ctl/websocket");
// 连接成功后的回调函数
ws.onopen = function (params) {
console.log('客户端连接成功')
// 向服务器发送消息
ws.send('认证成功！')
};
// 从服务器接受到信息时的回调函数
ws.onmessage = function (e) {
console.log('收到服务器响应', e.data)
this.proTriaxialData = e.data;
console.log( this.proTriaxialData);
var data = e.data;
if(data!=undefined){
if(data.indexOf("{") != -1){
var obj = JSON.parse(data);
if(obj.hasOwnProperty("lng")){
console.info(obj);
var point = new AMap.LngLat(obj.lng,obj.lat);
that.addMarker2(point,obj);
}
}else{
console.log(data);
}
}
};
// 连接关闭后的回调函数
ws.onclose = function(evt) {
console.log("关闭客户端连接");
};
// 连接失败后的回调函数
ws.onerror = function (evt) {
console.log("连接失败了",evt);
};
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，这样服务端会抛异常。
window.onbeforeunload = function() {
ws.close();
}
console.log(ws)
},
//打开推送
openWS(){
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
this.initWebSocket();
this.openWs = true;
} else {
this.openWs = false;
alert('当前浏览器 Not support websocket')
}
},
//关闭推送
stopWS(){
console.log("close");
ws.close();
this.openWs = false;
},
init() { //调用路径规划插件需要添加安全密钥
window._AMapSecurityConfig = {
securityJsCode: "xxxxxxxxxxxxxxxxxxxxxxxx",
}
AMapLoader.load({
key: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.InfoWindow', 'AMap.Marker', 'AMap.Polyline', 'AMap.Icon','AMap.Geolocation', 'AMap.Driving'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
this.map = new AMap.Map("container", { //设置地图容器id
viewMode: "2D", //是否为3D地图模式
zoom: 12, //初始化地图级别
center: [117.125809,36.679151], //初始化地图中心点位置
})
this.map.on('click', (e) => console.log(e));
this.addTools();//添加工具栏
this.addMarker() // 添加标记点
// this.onabort() // 配置路线
// this.infoWindowOpt() // 置弹窗
this.addCircle(); // 添加圆形区域
this.addPolygon(); //添加多边形区域
this.addRightMenu(); this.searchDriving();//路径规划
// this.setData(this.vehicleGis || [], this.planGis || []) // 传入后台初始化数据
}).catch((error) => {
console.log("地图加载失败！",error);
});
}, searchDriving(){
let that = this
let driving = new AMap.Driving({
map: that.map,
panel: 'panel',
policy:18
})
driving.search(
new AMap.LngLat(117.202322,36.693391),
new AMap.LngLat(117.120134,36.657355),
function (status, result) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
console.log('绘制驾车路线完成', result)
} else {
console.log('获取驾车数据失败：' result)
}
}
)
},
addTools(){
let that = this;
AMap.plugin(
[
"AMap.ToolBar",
"AMap.Scale",
"AMap.HawkEye",
"AMap.MapType",
"AMap.Geolocation",
"AMap.ControlBar",
],
function () {
//添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
// that.map.addControl(new AMap.ToolBar());
//添加比例尺控件，展示地图在当前层级和纬度下的比例尺
that.map.addControl(new AMap.Scale());
//添加鹰眼控件，在地图右下角显示地图的缩略图
// that.map.addControl(new AMap.HawkEye({ isOpen: true }));
//添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
that.map.addControl(new AMap.MapType());
//添加定位控件，用来获取和展示用户主机所在的经纬度位置
// that.map.addControl(new AMap.Geolocation());
//添加控制罗盘控件，用来控制地图的旋转和倾斜
that.map.addControl(new AMap.ControlBar());
}
);
},
//添加右键菜单
addRightMenu(){
let that = this;
//创建右键菜单
var contextMenu = new AMap.ContextMenu();
//右键放大
contextMenu.addItem("放大一级", function () {
that.map.zoomIn();
}, 0);
//右键缩小
contextMenu.addItem("缩小一级", function () {
that.map.zoomOut();
}, 1);
//右键显示全国范围
contextMenu.addItem("缩放至全国范围", function (e) {
that.map.setZoomAndCenter(4, [108.946609, 34.262324]);
}, 2);
//右键显示初始化视图
contextMenu.addItem("返回初始化视图", function (e) {
that.map.setZoomAndCenter(12, [117.125809,36.679151]);
}, 3);
//右键添加Marker标记
contextMenu.addItem("添加标记", function (e) {
var marker = new AMap.Marker({
map: that.map,
position: that.contextMenuPositon //基点位置
});
marker.on('click', ({ lnglat }) => {
console.log("删除此标记");
that.map.remove(marker);
})
}, 4);
//右键记录日志
contextMenu.addItem("记录日志", function (e) {
console.log("记录日志",that.contextMenuPositon);
that.logVisible = true;
}, 5);
//地图绑定鼠标右击事件——弹出右键菜单
that.map.on('rightclick', function (e) {
contextMenu.open(that.map, e.lnglat);
that.contextMenuPositon = e.lnglat;
});
contextMenu.open(that.map, that.contextMenuPositon);
},
//添加多边形区域
addPolygon(){
const area1 = [
[117.042754, 36.666346],
[117.044042,36.6892],
[117.063568,36.701209],
[117.072913,36.685365],
[117.073396,36.666346],
];
const area2 = [
[117.056176,36.679066],
[117.056202,36.674876],
[117.057179,36.674231],
[117.057168,36.67198],
[117.061599,36.672006],
[117.061599,36.672596],
[117.064104,36.672583],
[117.063868,36.679725],
[117.056229,36.679045]
];
const pathArr = [area1,area2];
const polygon = new AMap.Polygon({
path: pathArr, //多边形路径
fillColor: "#ccebc5", //多边形填充颜色
strokeOpacity: 1, //线条透明度
fillOpacity: 0.5, //填充透明度
strokeColor: "#2b8cbe", //线条颜色
strokeWeight: 1, //线条宽度
strokeStyle: "dashed", //线样式
strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
extData:{
areaType:"一厂区"
}
});
//鼠标移入更改样式
polygon.on("mouseover", () => {
polygon.setOptions({
fillOpacity: 0.7, //多边形填充透明度
fillColor: "#7bccc4",
});
});
//鼠标移出恢复样式
polygon.on("mouseout", () => {
polygon.setOptions({
fillOpacity: 0.5,
fillColor: "#ccebc5",
});
});
this.map.add(polygon);
var inRing = AMap.GeometryUtil.isPointInRing([117.056376,36.68915], area1);
var inRing2 = AMap.GeometryUtil.isPointInRing([117.034189,36.685812], area1);
var inRing3 = AMap.GeometryUtil.isPointInRing([117.06096,36.676369], area1);
console.log("inRing",inRing);
console.log("inRing2",inRing2);
console.log("inRing3",inRing3);
},
//添加圆形区域
addCircle(){
let that = this;
//设置圆形位置
var center = new AMap.LngLat(117.185774,36.680654);
//设置圆的半径大小
var radius = 1000;
//创建圆形 Circle 实例
var circle = new AMap.Circle({
center: center, //圆心
radius: radius, //半径
borderWeight: 1, //描边的宽度
strokeColor: "#FF33FF", //轮廓线颜色
strokeOpacity: 1, //轮廓线透明度
strokeWeight: 1, //轮廓线宽度
fillOpacity: 0.4, //圆形填充透明度
strokeStyle: "dashed", //轮廓线样式
strokeDasharray: [10, 10],
fillColor: "#1791fc", //圆形填充颜色
zIndex: 50, //圆形的叠加顺序
extData:{
areaType:"二厂区"
}
});
//圆形 Circle 对象添加到 Map
this.map.add(circle);
//根据覆盖物范围调整视野
// this.map.setFitView([ circle ]);
//鼠标移入事件
// circle.on("mouseover", function () {
// console.log("鼠标移入,添加窗体");
// var content = [
// "<div><b>高德软件有限公司</b>",
// "电话 : 010-84107000 邮编 : 100102",
// "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",
// ];
// that.addInfoModel(content);
// });
// circle.on("mouseout", function () {
// console.log("鼠标移出,关闭窗体");
// that.infoWindow.close();
// });
},
// 添加起始点和车子
addMarker() {
// var marker1 = new AMap.Marker({
// map: this.map,
// position: [117.185774,36.680654],
// clickable: true,//是否可以点击
// angle:180,//设置标记点的旋转角度
// icon: require('@/assets/images/carDirection.png'),
// anchor: 'bottom-center',
// extData:{
// id:1,
// deptId:263,
// carType:"01"
// }
// })
// console.log("this.marker1",marker1);
//
// //模拟车辆动态移动
// let lnt = 36.680654;
// let angle = 90;
// // 设置定时器，每隔5秒执行一次
// var timerMarker11 = setInterval(function() {
// // 在这里写需要执行的代码
// lnt = lnt 0.001;
// marker1.setPosition([117.185774,lnt]);
// if(lnt>=36.720000){
// lnt = 36.680654;
// }
// // angle = angle - 30;
// // if(angle==-360){
// // angle = 0;
// // }
// // marker1.setAngle(angle);
// // console.log("实时位置",marker1.getPosition());
// }, 1000);
var marker2 = new AMap.Marker({
map: this.map,
zIndex: 12,
position: [117.130358,36.6854],
angle:45,//设置标记点的旋转角度
// topWhenClick: false,
icon: require('@/assets/images/carDirection.png'),
anchor: 'middle-left',
extData:{
id:2,
deptId:263,
carType:"01"
}
});
var marker3 = new AMap.Marker({
map: this.map,
position: [117.064781,36.681457],
// clickable: false,
angle:0,//设置标记点的旋转角度
icon: require('@/assets/images/carDirectionNull.png'),
anchor: 'bottom-center',
extData:{
id:3,
deptId:263,
carType:"02"
}
});
// marker1.on('click', ({ lnglat }) => {
// console.log("点击事件",marker1.getExtData());
// var content = [
// "<div><b>车辆信息</b>",
// "车牌号【鲁A·88888】",
// "车主 : 张三 手机号 : 18888888888",
// "状态 : 运输中</div>",
// ];
// this.addInfoModel(content, [lnglat.lng, lnglat.lat]);
// })
marker2.on('click', ({ lnglat }) => {
console.log("点击事件",lnglat);
var content = [
"<div><b>车辆信息</b>",
"车主 : 李四 手机号 : 18888888888",
"状态 : 运输中</div>",
];
this.addInfoModel(content, [lnglat.lng, lnglat.lat]);
})
marker3.on('click', ({ lnglat }) => {
console.log("点击事件",lnglat);
var content = [
"<div><b>车辆信息</b>",
"车主 : 王五 手机号 : 18888888888",
"状态 : 运输中</div>",
];
this.addInfoModel(content, [lnglat.lng, lnglat.lat]);
})
},
// 添加动态点
addMarker2(point,obj){
//路口名称
var addrName = obj.carNumber;
//人流量
var weight = obj.weight;
//信息窗口
// var contents = '<div style="width: 200px;border: solid 1px silver;">'
// '<div style="position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius: 5px 5px 0 0;"></div>'
// '<div style="font-size: 14px;padding: 6px;line-height: 20px;background-color: white;height:67px;"><strong>车辆：</strong>：' addrName '<br><strong>运载重量：</strong>：' weight ' 吨</div>'
// '<div style="height: 0px;width: 100%;clear: both;text-align: center;position: relative; top: 0px; margin: 0px auto;"><img style="transform: rotate(-180deg);" src="' carDirection '"></div>'
// '</div>';
//点标记对象
var marker = new AMap.Marker({
// content:contents,
position: point,
angle:180,//设置标记点的旋转角度
icon: require('@/assets/images/carDirectionNull.png'),
extData:{addrName:addrName},
// offset: new AMap.Pixel(-13, -30)
});
marker.on('click', ({ lnglat }) => {
var content = [
"<div><b>车辆信息</b>",
"车牌号【京A·88888】",
"车主 : 张三 手机号 : 18888888888",
"状态 : 运输中</div>",
];
this.addInfoModel(content, [lnglat.lng, lnglat.lat]);
})
//优先判断是否为空对象
if(this.markers.length>0){
//根据路口名称查询存在的索引 不存在返回-1
var index = this.isExist(addrName);
if(index>=0){
//先清空之前的对象
this.markers[index].setMap(null);
//再把最新的点渲染到地图
marker.setMap(this.map);
//更新最新的点到markers数组
this.markers[index] = marker;
// this.map.setFitView();
}else{
marker.setMap(this.map);
this.markers.push(marker)
// this.map.setFitView();
}
} else {
marker.setMap(this.map);
this.markers.push(marker)
// this.map.setFitView();
}
},
isExist(addrName) {
var index = -1;
for (var i = 0; i < this.markers.length; i ) {
var element = this.markers[i]
console.log(" element.getExtData().", element.getExtData())
var dataAddrName = element.getExtData().addrName;
if(dataAddrName==addrName){
index = i;
}else{
continue;
}
}
return index;
},
// 添加多个途径点
addMarkerCon() {
this.data.waypoints.forEach((m, i) => {
if (i !== this.data.waypoints.length - 1) {
const { clientLongitude, clientLatitude, clientName, clientAddr } = m
var marker = new AMap.Marker({
map: this.map,
position: [clientLongitude, clientLatitude],
icon: require('@/assets/images/carDirection.png'),
// anchor: 'middle-left',
offset: new AMap.Pixel(-13, -30),
});
marker.on('click', ({ lnglat }) => this.markerClick(lnglat, clientName, clientAddr));
// marker.emit('click', { target: marker });//默认初始化不出现信息窗体,打开初始化就出现信息窗体
this.markers.push(marker);
}
});
},
// 途径点和终点的信息窗体
markerClick({ lng, lat }, name, ads) {
const con = `<div><div style="font-size: 14px;font-weight: bold;color: #333;">${name || ""}</div><span style="font-size: 12px;color: #999;">${ads || ''}</span></div>`
this.infoWindowZ.setContent(con);
this.infoWindowZ.open(this.map, [lng, lat]);
// this.infoWindowZ.open(this.map, [lnglat.lng, lnglat.lat]);
},
infoWindowOpt() {
const content = ``
this.infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
closeWhenClickMap: true,//控制是否在鼠标点击地图后关闭信息窗体
anchor: 'middle-left',
content,
offset: new AMap.Pixel(42, -25),
});
this.infoWindowZ = new AMap.InfoWindow({
closeWhenClickMap: true,
content: '',
offset: new AMap.Pixel(0, -16),
});
// this.infoWindow.close(); // 关闭窗体
},
/**
* 参数：
* fromPoint: [经度，纬度] ------ 起点
* toPoint ：[经度，纬度] ------ 终点
*
* 返回值：
* 0-360的角度值
**/
getAngle(fromPoint, toPoint) {
// 获取两点弧度
var radian = Math.atan2(toPoint[1] - fromPoint[1], toPoint[0] - fromPoint[0]);
// 转成角度
var angle = radian * 180 / Math.PI;
// 确保角度在0—360之间
//将负值转化为正值
if (angle < 0) angle = 360;
//将0-180的y为负的转化为180-360之间
if (toPoint[1] < fromPoint[1]) angle = 180;
//调整角度为arcgis的角度，即setAngle(角度)
if (angle >= 0 && angle <= 180) angle = 180 - angle;
else if (angle > 180 && angle <= 360) angle = 540 - angle;
else if (angle > 360) angle = angle % 360;
return Number(angle);
},
//添加信息窗体 (内容,坐标)
addInfoModel(content,coordinate){
//创建 infoWindow 实例
var infoWindow = new AMap.InfoWindow({
content: content.join("<br>"), //传入字符串拼接的 DOM 元素
anchor: "top-left",
});
// console.log(this.map.getCenter());
//打开信息窗体
infoWindow.open(this.map, coordinate); //map 为当前地图的实例，map.getCenter() 用于获取地图中心点坐标。
},
//选择监控类型的车辆
handleChange(carType){
let that = this;
console.log("carType",carType);
// 获取所有的 Marker
let allOverlays = this.map.getAllOverlays('marker');
console.log("allOverlays",allOverlays); // 打印所有 Marker
if(allOverlays.length>0){
allOverlays.forEach(e=>{
if(carType === '00'){
e.show();
}else{
if(that.checkEmpty(e.getExtData())||e.getExtData().carType !== carType){
e.hide();
}else{
e.show();
}
}
})
// 更新视图
// that.map.setFitView();
}
},
handleCheckedAreas(value){
console.log("value",value)
let checkedCount = value.length;
this.checkAll = checkedCount === this.areaOptions.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.areaOptions.length;
this.handleClcAreaIsShow();
},
handleCheckAllChange(val){
console.log("val",val)
this.checkedArea = val ? this.areaOptions : [];
this.isIndeterminate = false;
this.handleClcAreaIsShow();
},
handleClcAreaIsShow(){
let that = this;
let allOverlays = that.getAllPolygonsAndCircles();
if(allOverlays.length>0){
allOverlays.forEach(e=>{
if(!that.checkEmpty(e.getExtData())){
if(that.checkedArea.length>0){
// console.log("e.getExtData().areaType",e.getExtData().areaType);
if(that.checkedArea.includes(e.getExtData().areaType)){
e.show();
}else{
e.hide();
}
}else{
e.hide();
}
}
})
}
},
// 函数：获取所有多边形和圆形区域
getAllPolygonsAndCircles() {
var allOverlays = this.map.getAllOverlays('polygon'); // 获取所有的多边形
allOverlays = allOverlays.concat(this.map.getAllOverlays('circle')); // 合并圆形
return allOverlays;
},
checkEmpty(e){
if(e==null||typeof (e) =='undefined'||e===""){
return true;
}
return false;
},
}
}
</script>
<style scoped>
.container-amap{
width: 100%;
height: 850px;
}
</style>
