Vue中使用百度地图

心已赠人 2023-05-22 04:57 21阅读 0赞

首先，看看[官方文档][Link 1]，然后投入使用，先看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
我在使用中用到了鼠标缩放、右下角的缩略图、多个标点、信息窗口这些功能。

## 下载 ##

npm install vue-baidu-map --save

## 引入 ##

我只有一个页面用到了，所以选择局部注册：

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    import {BmOverviewMap, BmPointCollection , BmInfoWindow} from 'vue-baidu-map'
    
    components:{
         BaiduMap,      //  地图组件
         BmOverviewMap,     //  缩略图组件
         BmPointCollection,  // 标点组件
         BmInfoWindow,    // 信息窗口组件
     },

## 使用 ##

//  html  这些事件和属性在官网上都有解释
    <baidu-map 
    :center="center" 
    :zoom="zoom" 
    @ready="handler" 
    class="bm-view" 
    ak="fgf6576jhmgjghFDHY8768769OHMBVCNHG" 
    :scroll-wheel-zoom="true"
    >
        
        <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
        
        <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_STAR" color="#0923D9" size="BMAP_POINT_SIZE_HUGE" @mouseover="overTag"></bm-point-collection>
        
        <bm-info-window :position="infoPosition" title="信息：" :show="infoOff" @close="infoWindowClose" @open="infoWindowOpen">
            <p v-html="infoCont"></p>
        </bm-info-window>
    </baidu-map>
    
    
    
    
    // data
     center: {lng: 0, lat: 0},   // 地图中心
     zoom: 3,         // 放大倍数
     points: [],      //  标点个数
     infoPosition: {lng: 0, lat: 0},      // 信息窗口位置
     infoOff: false,     //  信息窗口显示
     infoCont:''          // 信息窗口内容
    
    
    
    //  js
    // 获取标点数量
    getTagList () {
        this.$get('/xxxxx/tt/uu', {id: this.id}).then(res => {
            if (res.code == 1000) {
                this.contAddrList = res.data
                if (this.contAddrList.length != 0) {        //  获取标点数量、初始化中心点位置、初始化窗体位置
                    this.center.lng = this.contAddrList[0].longitude
                    this.center.lat = this.contAddrList[0].latitude
                    this.infoPosition.lng = this.contAddrList[0].longitude
                    this.infoPosition.lat = this.contAddrList[0].latitude
                    this.contAddrList.forEach(item => {
                        this.points.push({lng: item.longitude , lat: item.latitude, id: item.id})
                    })
                }
            }
        })
    },
    // map的ready事件
    handler ({BMap, map}) {
         // console.log(BMap, map)
         this.zoom = 15
     },
     // 滑过标点显示窗体
     overTag ({currentTarget, point, returnValue, target, type}) {
         this.infoOff = true
         this.infoPosition.lng = point.lng
         this.infoPosition.lat = point.lat
         this.contAddrList.forEach(item => {   // 获取滑过标点窗体信息
             if (item.id == point.id) {
                 this.infoCont = '名称：' +  item.name+ '<br/>' + '地址：' +  item.address + '<br/>' + '电话：' +  item.tel
             }
         })
     },
     // 窗体打开和关闭
     infoWindowClose (e) {
         this.infoOff = false
     },
     infoWindowOpen (e) {
         this.infoOff = true
     },
    
    
    
    
    // css
    .bm-view {
      	 width: 100%;
         height: 360px;
     }

ok，就是这么多啦，到这里就能完整的看到效果了。

[Link 1]: https://dafrok.github.io/vue-baidu-map/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: /images/20230521/3813f85c54924ac29953a9cd74d13617.png