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

最新推荐文章于 2024-09-30 11:17:43 发布

we_前端全家桶

最新推荐文章于 2024-09-30 11:17:43 发布

阅读量1.8k

点赞数

分类专栏： vue+elementUi 文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/qq_26277237/article/details/123510409

版权

本文介绍如何在Vue.js项目中使用vue-baidu-map组件，实现百度地图的定位功能，并详细讲解如何替换默认地图图标以及添加自定义标签，提升地图的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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个级别