VUE + 百度地图实现1.定位 2.点击点展示信息 3.电子围栏4.运动轨迹_vue baidu map中多个点鼠标移入显示信息-CSDN博客

本文介绍了如何在Vue.js应用中集成百度地图API，实现地图中心定位、导航、动态点标记及信息窗口展示。通过全局注册组件、配置API密钥，结合axios获取数据，展示了动态定位点、电子围栏、轨迹路径等功能，并提供了时间格式化和刷新定位的方法。

实现效果如下：

1、安装

1	`$ npm install vue-baidu-map --save`

2、全局注册，在main.js中引入以下代码

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {

ak: '你申请的key'

})

3、界面

<template>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:100%" :scroll-wheel-zoom='true' > 
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!-- 遍历多个点坐标 -->
        <template v-for="(items, index) in markers">
            <bm-marker :key="index" :position="items.markerPoint" @click="look(items)" animation="BMAP_ANIMATION_DROP"></bm-marker>
        </template>
        <!-- 信息窗体 -->
        <bm-info-window :position="position" :show="show" @close="infoWindowClose" @open="infoWindowOpen">
            <div style="width:300px;display:flex;justify-content: space-between;padding-top:12px;">
                <div>
                    <div class="font">耳标号：</div>
                    <div class="font2">{
  
  {from.animalRecordName||'--'}}</div>
                    <div class="font">坐标：</div>
                    <div class="font2">{
  
  {from.markerPoint.lng||'--'}},{
  
  {from.markerPoint.lat||'--'}}</div&g