Vue中使用百度地图

最新推荐文章于 2024-05-14 15:43:03 发布

慢半拍、

最新推荐文章于 2024-05-14 15:43:03 发布

阅读量1.8k

点赞数

分类专栏： vue bMap百度地图

本文链接：https://blog.csdn.net/huanhuan03/article/details/105554169

版权

vue 同时被 2 个专栏收录

55 篇文章 6 订阅

订阅专栏

bMap百度地图

2 篇文章 0 订阅

订阅专栏

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

下载

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，就是这么多啦，到这里就能完整的看到效果了。