1.地图导航，描点弹窗信息窗口
001.png
<!----地图组件---司机位置及描点 信息窗口--->
<!---
API说明 非必填
list 导航数组 [[121.488697,31.259303],[121.488697,31.289303]]
list[0] 数组 起始坐标 [121.488697,31.259303]
list[1] 数组 终点坐标 [121.488697,31.289303]
motormanList 司机数组 地图标注司机位置 点击展示司机信息
licensePlate 车牌号
name 司机姓名
ready 司机状态
car_id 车辆类型 arrar
s_id 技师技能 arrar
---->
<template>
<div id="app">
<div id="container"></div>
<div id="panel"></div>
</div>
</template>
<script>
import { mapActions } from 'vuex';
import red from "@/assets/red.png";
import success from "@/assets/success.png";
import yellow from "@/assets/yellow.png";
import cart from "@/assets/cart.png";
import destination from "@/assets/destination.png";
import rescue from "@/assets/rescue.png";
export default {
props:["list","motormanList"],
name: 'Xmaps',
data(){
return {
icon:[red,success,yellow,cart],
// motormanList:[
// {licensePlate:"沪A54564",name:"刘xxx",status:0,time:20,end:"14:20",position:[121.488697,31.259303]},
// {licensePlate:"沪A59874",name:"王xxx",status:1,time:20,end:"14:30",position:[121.488697,31.289303]},
// ]
map:"",
driving:"",
startMarker:[]
}
},
destroyed(){
this.map.destroy();
},
methods:{
...mapActions([]),
//创建信息窗口
info(data){
if(!data){
return false;
}
var self = this;
var temp = "";
var infoWindow;
var cartName = [],sjName=[];
data.car_id.map((e)=>{
cartName.push(e.name);
})
data.s_id.map((e)=>{
sjName.push(e.name);
})
temp = `<div style="font-size:12px;color:#222;width:160px;padding:10px">
<div style="line-height:24px;">
<label style="margin-right:10px;">车牌号</label>
<span style="color:#909399">${data.license_plate?data.license_plate:'无'}</spam>
</div>
<div style="line-height:24px">
<label style="margin-right:10px;">救援技师</label>
<span style="color:#909399">${data.name}</spam>
</div>
<div style="line-height:24px">
<label style="margin-right:10px;">任务状态</label>
<span style="color:#909399">${data.ready==0?'空闲':(data.ready==1?'进行中':"休息")}</spam>
</div>
<div style="line-height:24px">
<label style="margin-right:10px;">车辆类型</label>
<span style="color:#909399">${cartName.length>0?cartName.join(','):"无"}</spam>
</div>
<div style="line-height:24px">
<label style="margin-right:10px;">技师技能</label>
<span style="color:#909399">${sjName.length>0?sjName.join(','):"无"}</spam>
</div>
</div>`;
var info = [];
info.push(temp);
infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(-10, -30),
content: info.join("") //使用默认信息窗体框样式，显示信息内容
});
infoWindow.open(this.map,data.position);
},
//创建点坐标
point(){
// 将 icon 传入 marker
this.map.remove(this.startMarker);
this.startMarker = [];
console.log(this.motormanList);
this.motormanList.map((data)=>{
var img = "";
if(data.ready==1){
img = this.icon[1];
}else if(data.ready==2){
img = this.icon[2];
}else{
img = this.icon[0];
}
var html = `<div style="width:100px;text-align:center">
<img src='${img}' width='40' height='48' />
<div style='font-size:12px;color:#fff;background:rgba(0,0,0,0.8);padding:2px 10px;border-radius:5px;line-height:24px;'>${data.license_plate?data.license_plate:'无'}</div>
</div> `;
var startMarker = new AMap.Marker({
position: new AMap.LngLat(data.position[0]-0,data.position[1]-0),
content: html,
topWhenClick:true,
zIndex:999999,
offset: new AMap.Pixel(-50, -30)
});
this.startMarker.push(startMarker);
var self = this;
startMarker.on("click",function(){
self.info(data);
})
})
this.map.setZoomAndCenter(14,this.motormanList.length>0?this.motormanList[0].position:this.list[0]);
// 将 markers 添加到地图
this.map.add(this.startMarker);
this.info(this.motormanList[0]);//默认显示第一个
},
setGps(){
var than = this;
//构造路线导航类
this.map.clearMap(this.driving);
this.point();
this.driving ="";
setTimeout(() => {
if(this.list[0]){
var marker = new AMap.Marker({
map: this.map,
position: this.list[0],
icon: rescue,
offset: new AMap.Pixel(-26, -52),
autoRotation: true,
//angle:-90,
});
this.map.setZoomAndCenter(11,this.list[0]);
}
if(this.list[1]){
var marker1 = new AMap.Marker({
map: this.map,
position: this.list[1],
icon: destination,
offset: new AMap.Pixel(-26, -52),
autoRotation: true,
//angle:-90,
});
this.driving = new AMap.Driving({
map: this.map,
panel: "panel",
zoom: 5,
policy: AMap.DrivingPolicy.LEAST_TIME,
hideMarkers:true
});
this.map.setZoomAndCenter(11, this.list[1]);
//根据起终点经纬度规划驾车导航路线
}
console.log(this.list[1]&&this.list[0]);
if(this.list[1]&&this.list[0]){
//显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息
this.driving.search(new AMap.LngLat(this.list[0][0],this.list[0][1]),new AMap.LngLat(this.list[1][0],this.list[1][1]),function(status, result){
console.log("距离",result.routes[0]);
than.$emit("setDis",(result.routes[0].distance/1000).toFixed(2));
});
}
}, 200);
}
},
watch:{
list:{
handler:function(newVal,oldVal){
this.setGps();
},
deep:true
},
motormanList:function(){
if(this.motormanList&&this.motormanList.length>0){
this.setGps();
}else{
this.map.remove(this.startMarker);
}
}
},
mounted(){
this.map = new AMap.Map("container", {
resizeEnable: true,
zoom: 50 //地图显示的缩放级别
});
if(this.motormanList&&this.motormanList.length>0){
this.setGps();
}
}
}
</script>
<style scoped lang="scss">
#app,#container{
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
</style>
2.轨迹回放，描点信息窗口
002.png
003.jpg
<!----地图组件---画司机轨迹--->
<!---
data 组件数据
---->
<template>
<div id="app">
<div id="container"></div>
</div>
</template>
<script>
import { mapActions } from 'vuex';
import destination from "@/assets/destination.png";
import rescue from "@/assets/rescue.png";
import rise from "@/assets/rise.png";
import red from "@/assets/red.png";
import charector from "@/assets/charector.png";
export default {
props:["list","location","taskList"],
name: 'ymaps',
data(){
var self = this;
return {
map:"",
icon:[rescue,destination],
startMarker:""
}
},
destroyed(){
this.map.destroy();
},
watch:{
list:function(){
this.init();
}
},
methods:{
...mapActions([""]),
//创建点坐标
point(){
console.log(this.location);
// 将 icon 传入 marker
this.map.remove(this.startMarker);
this.startMarker = [];
this.location.map((data,i)=>{
var html = `<div style="width:100px;text-align:center;">
<img src='${this.icon[i]}' width="40" height="48" />
<div style='font-size:12px;color:#fff;background:rgba(0,0,0,0.8);padding:2px 6px;border-radius:5px;line-height:24px;'>${i==0?'救援地':'目的地'}</div>
</div> `;
var startMarker = new AMap.Marker({
position: new AMap.LngLat(data[0]-0,data[1]-0),
content: html,
topWhenClick:true,
zIndex:999999,
offset: new AMap.Pixel(-50, -30)
});
this.startMarker.push(startMarker);
})
if(this.taskList&&this.taskList.length>0){
this.taskList.map((e)=>{
var html = `<div style="width:100px;text-align:center">
<img src='${red}' width="40" height="48" style="margin:0" />
<div style='font-size:12px;color:#fff;background:rgba(0,0,0,0.8);padding:2px 6px;border-radius:5px;line-height:24px;'>${e.statusName}</div>
</div> `;
if(e.location){
var startMarker = new AMap.Marker({
position: new AMap.LngLat(e.location[0]-0,e.location[1]-0),
content: html,
topWhenClick:true,
zIndex:999999,
offset: new AMap.Pixel(-50, -30)
});
this.startMarker.push(startMarker);
}
})
}
this.map.setZoomAndCenter(14,this.location[0]);
// 将 markers 添加到地图
this.map.add(this.startMarker);
},
init(){
var marker;
//测试轨迹数据
// var lineArr = [
// [116.478935,39.997761],
// [116.478939,39.997825],
// [116.478912,39.998549],
// [116.478912,39.998549],
// [116.478998,39.998555],
// [116.478998,39.998555],
// [116.479282,39.998560],
// [116.479658,39.998528],
// [116.480151,39.998453],
// [116.480784,39.998302],
// [116.480784,39.998302],
// [116.481149,39.998184],
// [116.481573,39.997997],
// [116.481863,39.997846],
// [116.482072,39.997718],
// [116.482362,39.997718],
// [116.483633,39.998935],
// [116.483670,39.9989680],
// [116.484648,39.999861]];
this.map = new AMap.Map("container", {
resizeEnable: true,
center: this.list[0],
zoom: 17
});
console.log(this.list);
if(this.list.length>0){
//起点
var marker1 = new AMap.Marker({
map: this.map,
position: this.list[0],
icon: rise,
offset: new AMap.Pixel(-26, -52),
autoRotation: true,
//angle:-90,
});
//小车当前位置
marker = new AMap.Marker({
map: this.map,
position: this.list[this.list.length-1],
icon:charector,
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle:-90,
});
}
// 绘制轨迹
var polyline = new AMap.Polyline({
map: this.map,
path: this.list?this.list:[],
showDir:true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 8, //线宽
// strokeStyle: "solid" //线样式
});
var passedPolyline = new AMap.Polyline({
map: this.map,
//path: lineArr,
strokeColor: "#AF5", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
this.point();
}
},
mounted(){
this.init();
}
}
</script>
<style scoped lang="scss">
#app,#container{
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
</style>
3.选取地图位置，搜索地址
005.jpg
004.png
<!----地图组件--->
<!---
setSite
---->
<template>
<div id="boxapp">
<div id="containerBox"></div>
<!-- <div id="panel"></div> -->
<div id="myPageTop">
<div class="label">请输入关键字：</div>
<div class="input"><input id="tipinput" placeholder="请输入关键字"/></div>
</div>
</div>
</template>
<script>
export default {
name: 'mapSite',
prop:["markers"],
data(){
return {
mapBox:""
}
},
destroyed(){
//this.map.destroy();
},
methods:{
},
mounted(){
var than = this;
//地图加载
this.mapBox = new AMap.Map("containerBox", {
resizeEnable: true,
zoom: 12
});
//输入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: this.mapBox,
//panel:"panel"
}); //构造地点查询类
AMap.event.addListener(auto,"select",function(e){
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
console.log(e.poi);
if(e.poi.location){
than.$emit("setSite",{
name:e.poi.name,
address:Array.isArray(e.poi.address)?e.poi.district:e.poi.address,
location:[e.poi.location.lng,e.poi.location.lat]
})
}
});//注册监听，当选中某条记录时会触发
AMap.event.addListener(placeSearch, "markerClick", function(e){
console.log(e.data)
than.$emit("setSite",{
name:e.data.name,
address:e.data.address?e.data.address:e.data.name,
location:[e.data.location.lng,e.data.location.lat]
})
})
this.mapBox.on("click",function(res){
than.$emit("setSite",{
name:"",
address:"",
location:[res.lnglat.lng,res.lnglat.lat]
})
})
}
}
</script>
<style scoped lang="scss">
#boxapp{
width: 100%;
height: 600px;
position: relative;
#containerBox{
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
padding: 10px;
background: #f5f5f5;
.search-box{
margin-bottom: 10px;
}
}
#myPageTop{
position: absolute;
left: 10px;
top: 20px;
background: #fff;
width: 290px;
padding: 10px;
box-shadow: 0 0 7px 0px rgba(0,0,0,0.5);
.label{
font-size: 14px;
color: #999;
}
.input{
width: 270px;
height: 32px;
line-height: 32px;
margin: 10px 0;
input{
display: block;
width: 100%;
height: 30px;
border: none;
outline: none;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #dcdfe6;
}
input:focus{
border-color: #409EFF;
transition: all 0.5s;
}
}
}
}
</style>
网友评论