vue-baidu-map 百度地图（定位替换图标，添加标签）

html：

<template><div class="orderMonitoringBox"><!--  地图开始  --><baidu-mapref="orderMap"@ready="mapReady"class="map-view":center="map.center":zoom="map.zoom":scroll-wheel-zoom="map.scrollWheelZoom":mapClick="map.mapClick":ak="map.ak"><!--比例尺控件--><bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale><!--缩放控件--><bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation><!--聚合动态添加的点坐标--><bm-marker-clusterer :averageCenter="true"><bm-marker:icon="markerIcon"v-for="(marker,index) of markers":key="index":position="{lng: marker.lng, lat: marker.lat}"@click="lookDetail(marker)"></bm-marker><bm-marker:icon="markerIcon1"v-for="(marker,index1) of markers1":key="index1+'a'":position="{lng: marker.lng, lat: marker.lat}"@click="lookDetail(marker)"></bm-marker></bm-marker-clusterer><bm-drivingv-if="bmDriving":start="driving.start":end="driving.end":panel="false":autoViewport="true"></bm-driving></baidu-map><!--  地图结束  --></div></div>
</template>

javascript:

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmScale from "vue-baidu-map/components/controls/Scale";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmTransit from "vue-baidu-map/components/search/Transit";
import BmDriving from "vue-baidu-map/components/search/Driving";
import {getDriverStatisticsInfoList,getDriverStatistics,getCompany,getBaidu,getDriverStatusList,getDriverStatus,getFindById
} from "@/api/valetDriverMonitoring";
import { findById, getCenterCompanyList } from "@/api/agentManagement";
import Global from "@/utils/Global";
export default {name: "orderMonitoring",components: {BaiduMap,BmScale,BmNavigation,BmMarkerClusterer,BmMarker,BmInfoWindow,BmTransit,BmDriving},watch: {},data() {return {isMobile: false,timeInfo: "",showInfo: 2,keyword: "百度",loading: false,//表单数据dataForm: {driverStatus: "1",driverType: "3", //业务类型companyId: "" //所属公司},entityNamesArr: [],freeEntityNamesArr: [],//总条目数total: 0,//列表数据dataList: [],/*百度地图对象*/BMap: {},baiduMap: {},//是否展示路线bmDriving: false,//路线的起始坐标和结束坐标driving: {start: { lng: 125.331468, lat: 43.918242 },end: { lng: 123.401243, lat: 41.801383 }},//地图标记点的图片markerIcon: {url: require("@/assets/car1.png"),size: { width: 42, height: 49 }},markerIcon1: {url: require("@/assets/car2.png"),size: { width: 40, height: 40 }},//地图参数map: {ak: Global.baiduAK, //百度地图的akzoom: 15, //地图显示比例尺的大小，必须定义，有1~19个级别scrollWheelZoom: true, //鼠标滚轮控制缩放mapClick: false, //禁止点击景点弹出信息窗体，自定义的除外center: ""},// 地图标记点数据markers: [],markers1: [],// 业务类型businessType: [{ value: "1", label: "城际" }],// 所属公司company: [],//城市city: [],summaryInformation: {orderInProgress: "",workingDriver: "",freeDriver: "",offLineDriverCpunt: ""},timer: null,oDiv: null,addrStr: "",driverStatusData: [{value: "1",label: "空闲中"},{value: "2",label: "行驶中"},{value: "0",label: "已下班",disabled: true},{value: "3",label: "离线",disabled: true}]};},mounted() {this.dataForm.companyId = JSON.parse(localStorage.getItem("userInfo")).companyId;// console.log(this.dataForm.companyId,'this.dataForm.companyId')this.getCompany(); //获取公司列表// this.getData();this.findByIdMsg();},created() {if (this._isMobile()) {// alert("手机端");this.isMobile = true;}this.timeInfo = parseInt(new Date().getTime() / 1000);console.log(this.timeInfo, "timeInfo");this.getBaidu();this.findByIdMsg();},methods: {_isMobile() {let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);return flag;},findByIdMsg() {getFindById({id: this.dataForm.companyId}).then(res => {console.log(res, "公司详情地点坐标");if (res.status == 200) {this.centerPointStr = res.data.centerPoint;this.lngStr = res.data.centerPoint.split(",")[0];this.latStr = res.data.centerPoint.split(",")[1];this.baiduMap.centerAndZoom(new BMap.Point(this.lngStr, this.latStr),15);}});},handleSeleUserId(scope) {console.log(scope, "scope");var params = {service_id: 230056,// coord_type_output: "bd09ll",// entity_name: scope.entityName, //司机姓名-司机id/this.entity_namefilter: `entity_names:${scope.entityName}|active_time:${this.timeInfo}`// process_option: "denoise_grade=1,need_mapmatch=1,transport_mode=driving"};console.log(params, "params");getBaidu({apiType: 2,methodType: 2,params: params,url: "/entity/list"}).then(res => {console.log(res.data.entities[0].latest_location,"百度获取鹰眼功能---------------");if (res.status == 200) {// let lng = res.data.latest_point.longitude;// let lat = res.data.latest_point.latitude;let lng = res.data.entities[0].latest_location.longitude;let lat = res.data.entities[0].latest_location.latitude;let json = {lng: lng,lat: lat,data: scope};let titleContent1 = `<span style="width:6px;height:6px;border-radius:50%;background-color:#FFFFFF;display:inline-block;margin-right:3px"></span><span style="width:6px;height:6px;border-radius:50%;background-color:#FFFFFF"></span><span style="color:#FFFFFF;">已下班</span><span>${json.data.driverName}</span><span>${json.data.phone}</span>`;let titleContent2 = `<span style="width:6px;height:6px;border-radius:50%;background-color:#FFFFFF;display:inline-block;margin-right:3px"></span><span style="color:#FFFFFF;">空闲中</span><span>${json.data.driverName}</span><span>${json.data.phone}</span>`;let titleContent3 = `<span style="width:6px;height:6px;border-radius:50%;background-color:#FFFFFF;display:inline-block;margin-right:3px"></span><span style="color:#FFFFFF;">行驶中</span><span>${json.data.driverName}</span><span>${json.data.phone}</span>`;let titleContent4 = `<span style="width:6px;height:6px;border-radius:50%;background-color:#FFFFFF;display:inline-block;margin-right:3px"></span><span style="color:#FFFFFF;">离线</span><span>${json.data.driverName}</span><span>${json.data.phone}</span>`;var getPoint = new BMap.Point(json.lng, json.lat); //label显示的位置console.log(getPoint, "getPoint");var opts = {position: getPoint, // 指定文本标注所在的地理位置offset: new BMap.Size(-75, -50) //设置文本偏移量};// 已下班 0 空闲中 1 行驶中 2  离线 3this.baiduMap.clearOverlays();if (scope.driverStatus == 0) {console.log("已下班", titleContent1, "111");var label = new BMap.Label(titleContent1, opts); // 创建文本标注对象label.setStyle({color: "#FFFFFF",fontSize: "12px",lineHeight: "20px",fontFamily: "微软雅黑",borderRadius: "6px",padding: "3px 8px",lineHeight: "20px",border: "none",boxShadow: "0px 0px 10px #ccc",background: "#3F9EFF"});this.baiduMap.addOverlay(label);this.markers.push(json);} else if (scope.driverStatus == 1) {console.log("空闲中", titleContent2, "----");var label = new BMap.Label(titleContent2, opts); // 创建文本标注对象label.setStyle({color: "#FFFFFF",fontSize: "12px",lineHeight: "20px",fontFamily: "微软雅黑",borderRadius: "6px",padding: "3px 8px",lineHeight: "20px",border: "none",boxShadow: "0px 0px 10px #ccc",background: "#0EA062"});this.baiduMap.addOverlay(label);this.markers.push(json);} else if (scope.driverStatus == 2) {console.log("行驶中");var label = new BMap.Label(titleContent3, opts); // 创建文本标注对象label.setStyle({color: "#FFFFFF",fontSize: "12px",lineHeight: "20px",fontFamily: "微软雅黑",borderRadius: "6px",padding: "3px 8px",lineHeight: "20px",border: "none",boxShadow: "0px 0px 10px #ccc",background: "#0EA062"});this.baiduMap.addOverlay(label);this.markers.push(json);} else if (scope.driverStatus == 3) {console.log("离线");var label = new BMap.Label(titleContent4, opts); // 创建文本标注对象label.setStyle({color: "#FFFFFF",fontSize: "12px",lineHeight: "20px",fontFamily: "微软雅黑",borderRadius: "6px",padding: "3px 8px",lineHeight: "20px",border: "none",boxShadow: "0px 0px 10px #ccc",background: "#77838F"});this.baiduMap.addOverlay(label);this.markers.push(json);}}let lng = res.data.entities[0].latest_location.longitude;let lat = res.data.entities[0].latest_location.latitude;var point = new BMap.Point(lng, lat);this.baiduMap.centerAndZoom(new BMap.Point(lng, lat), 20);});},/* 百度地图准备好了的回调函数 */mapReady({ BMap, map }) {console.log("mapReady");this.BMap = BMap; //BMapGLthis.baiduMap = map;//定位城市筛选// this.baiduMap.centerAndZoom(new BMapGL.Point(116.39742,39.909), 12);// this.baiduMap.centerAndZoom(new BMap.Point(this.lngStr, this.latStr), 10);console.log(this.BMap, this.baiduMap);this.$nextTick(() => {this.getList(); //显示获取到的订单列表});},//获取实时订单列表getList() {// this.loading = true;this.markers = [];this.markers1 = [];this.freeEntityNamesArr = [];this.entityNamesArr = [];this.bmDriving = false;this.baiduMap.clearOverlays();this.baiduMap.centerAndZoom(new BMap.Point(this.lngStr, this.latStr), 10);this.getDriverStatisticsInfoList();},getDriverStatisticsInfoList() {getDriverStatusList(this.dataForm).then(res => {if (res.status == 200) {console.log(res, "获取实时订单列表");this.dataList = res.data;this.total = res.data.total;this.summaryInformation.orderInProgress = res.data.total;// this.dataForm.pageIndex = res.data.current;// this.dataForm.pageSize = res.data.size;this.loading = false;this.getDriverStatistics(this.dataForm.companyId); //获取实时订单司机数量this.getEntityNamesArr(this.dataForm.companyId);this.getFreeEntityNamesArr(this.dataForm.companyId);}});},getEntityNamesArr(id) {this.entityNamesArr = [];getDriverStatisticsInfoList({driverStatus: "2",driverType: "3", //业务类型companyId: id //所属公司// pageIndex: 1,// pageSize: 10000}).then(res => {if (res.status == 200) {// console.log(res, "获取实时订单列表getEntityNamesArr");let dataList = res.data.records;for (let i = 0; i < dataList.length; i++) {this.entityNamesArr.push(this.dataList[i].entityName);}this.$nextTick(() => {this.getMarkers();});}});},getFreeEntityNamesArr(id) {this.freeEntityNamesArr = [];getDriverStatisticsInfoList({driverStatus: "1",driverType: "3", //业务类型companyId: id //所属公司}).then(res => {if (res.status == 200) {// console.log(res, "获取实时订单列表getFreeEntityNamesArr");let dataList = res.data.records;for (let i = 0; i < dataList.length; i++) {this.freeEntityNamesArr.push(this.dataList[i].entityName);}this.$nextTick(() => {this.getMarkers();});}});},//获取实时订单司机数量//司机监控数量统计getDriverStatistics(id) {getDriverStatus({companyId: id}).then(res => {// console.log(res, "获取实时订单司机数量//司机监控数量统计");if (res.status == 200) {this.summaryInformation = {workingDriverCount: res.data.workingDriverCount,freeDriverCount: res.data.freeDriverCount,unWorkDriverCount: res.data.unWorkDriverCount,offLineDriverCpunt: res.data.offLineDriverCpunt};}});},getBaidu(jsonD, str) {console.log(jsonD, str, 9099, jsonD.entity_name);var params = {service_id: 230056,coord_type_output: "bd09ll",filter: `entity_names:${jsonD.entity_name}|active_time:${this.timeInfo}`};getBaidu({apiType: 2,methodType: 2,params: params,url: "/entity/list"}).then(res => {console.log(res, "百度获取鹰眼功能--------------");if (res.status == 200) {let lng = res.data.latest_point.longitude;let lat = res.data.latest_point.latitude;let json = {lng: lng,lat: lat,data: jsonD.obj};console.log(json, "json");// console.log(json,'百度获取鹰眼功能');let titleContent1 = `<span style="color:#FFFFFF;">已下班</span><span>${jsonD.obj.driverName}</span><span>${jsonD.obj.phone}</span>`;let titleContent2 = `<span style="color:#FFFFFF;">空闲中</span><span>${jsonD.obj.driverName}</span><span>${jsonD.obj.phone}</span>`;let titleContent3 = `<span style="color:#FFFFFF;">行驶中</span><span>${jsonD.obj.driverName}</span><span>${jsonD.obj.phone}</span>`;let titleContent4 = `<span style="color:#FFFFFF;">离线</span><span>${jsonD.obj.driverName}</span><span>${jsonD.obj.phone}</span>`;var getPoint = new BMap.Point(json.lng, json.lat); //label显示的位置console.log(getPoint, "getPoint");var opts = {position: getPoint, // 指定文本标注所在的地理位置offset: new BMap.Size(-75, -50) //设置文本偏移量};if (str == "代驾") {var label = new BMap.Label(titleContent1, opts); // 创建文本标注对象label.setStyle({color: "#000",fontSize: "12px",lineHeight: "20px",fontFamily: "微软雅黑",borderRadius: "6px",padding: "3px 8px",lineHeight: "20px",border: "none",boxShadow: "0px 0px 10px #ccc"});this.baiduMap.addOverlay(label);this.markers.push(json);} else if (str == "空闲") {var label = new BMap.Label(titleContent2, opts); // 创建文本标注对象label.setStyle({color: "#000",fontSize: "12px",lineHeight: "20px",fontFamily: "微软雅黑",borderRadius: "6px",padding: "3px 8px",lineHeight: "20px",border: "none",boxShadow: "0px 0px 10px #ccc"});this.baiduMap.addOverlay(label);this.markers1.push(json);}}});},/*车辆位置 */getMarkers() {//代驾司机集合// let arr = [];// arr = this.entityNamesArrfor (let i = 0; i < this.entityNamesArr.length; i++) {this.getBaidu(this.entityNamesArr[i], "代驾");}//空闲司机集合for (let i = 0; i < this.freeEntityNamesArr.length; i++) {this.getBaidu(this.freeEntityNamesArr[i], "空闲");}// console.log(this.markers,'所有汽车的坐标经纬度');},//实时轨迹showtrajectory(row) {// console.log(row,'实时轨迹');//从row中获取订单的起始坐标和重点坐标this.driving = {start: { lng: row.startLongitude, lat: row.startLatitude },end: { lng: row.endLongitude, lat: row.endLatitude }};this.bmDriving = true;},
};
</script>

vue-baidu-map 百度地图（定位替换图标，添加标签）相关推荐

vue项目调用百度地图定位，判断当前位置是否在目标位置范围内
之前用vue做了一个百度地图定位功能,判断是否当前位置在目标位置范围内的小功能,类似这样: 直接上代码百度地图定位,设置目标位置范围,判断当前位置到目标位置的距离,BDMap.vue <tem ...
android百度地图定位自定义图标,百度地图SDK集成及根据坐标实现定位(android studio开发)...
百度地图SDK集成及根据坐标实现定位(android studio开发) 百度地图SDK集成及根据坐标实现定位(android studio开发) 1.下载百度地图SDK 链接:http://lbsy ...
Vue中用 Vue Baidu Map 绘制地图
1.先贴上官网案例 https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 官网的东西,没有百度地图开放平台上面的东西齐全,考虑到vue ...
android百度地图定位自定义图标,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...
本文将带你了解Android应用开发之android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): ...
仿滴滴打车百度地图定位查找附近出租车或门店信息
前端vue仿滴滴打车百度地图定位查找附近出租车或门店信息, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12982 喜欢我的前 ...
Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
vue cli3 百度地图定位
一.index.html 引入js <script type="text/javascript" src="http://api.map.baidu.com/a ...
baidumap vue 判断范围_vue百度地图 + 定位的详解
vue 百度地图 + 定位前提需要自己有百度的密钥,如没有可以去百度地图申请一.在主目录下的index.html引入js,例如: 二.在webpack.base.conf.js配置文件中配置BMa ...
vue 百度地图 + 定位
vue 百度地图 + 定位 > 前提需要自己有百度的密钥,如没有可以去百度地图申请一.在主目录下的index.html引入js,例如: 二.在webpack.base.conf.js配置文件中 ...
vue集合离线百度地图
vue集合离线百度地图 vue.js百度地图api离线发布于 1月9日一.需求场景所谓离线,大概都是项目在内网中使用,无法连接外网,所以需要开发离线地图功能. 在看以下步骤前,先提示这个vue项 ...

vue-baidu-map 百度地图（定位替换图标，添加标签）

vue-baidu-map 百度地图（定位替换图标，添加标签）相关推荐

最新文章

热门文章