html:
<template>
<div class="orderMonitoringBox">
<!-- 地图开始 -->
<baidu-map
ref="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-driving
v-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, //百度地图的ak
zoom: 15, //地图显示比例尺的大小,必须定义,有1~19个级别