• vue使用百度地图（vue-baidu-map）

    一. 插件安装

    npm i --save vue-baidu-map-v3

    • 1

    vue-baidu-map-v3使用的百度地图 JavaScript API v3.0

    二. main.js全局引入

    import BaiduMap from 'vue-baidu-map-v3'

Vue.use(BaiduMap, {
	ak: '你的ak'
})

    • 1
    • 2
    • 3
    • 4
    • 5

    三. 基本使用

    <template>
	<div class="container">
		<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler"></baidu-map>
	</div>
</template>
<script>
export default {
	data() {
		return {
			//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
			//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
			center: {lng: 0, lat: 0},
      		zoom: 3,
      		map: null,
      		BMap: null
		}
	},
	methods: {
		//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
		handler ({BMap, map}) {
	      this.map = map
	      this.BMap = BMap
	      this.center.lng = 116.404
	      this.center.lat = 39.915
	      this.zoom = 15
	    }
	}
}
</script>
<style>
	.container {
		width: 100%;
		height: 100%;
	}
	.bm-view {
		width: 100%;
		height: 100%; //BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
	}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    四. 覆盖物 (点，海量点，折线，信息窗体)

    <baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
	// 一个自定义图标的点
	<bm-marker :position="markerPoint" :rotation="markerRotation" :icon="{url:require('@/assets/marker.png'),size:{width:60,height:28}}" />
	//海量点--利用该类可同时在地图上展示万级别的点，目前仅适用于html5浏览器
	<bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_CIRCLE" color="red" size="BMAP_POINT_SIZE_SMALL" @click="clickHandler"></bm-point-collection>
	//无数条折线，每一条颜色都不一样
	<bm-polyline
       v-for="(item,id) in lineData"
       :key="id+item.color"
       :path="item.line"
       :stroke-color="item.color"
       :stroke-opacity="1"
       :stroke-weight="5"
     />
     // 信息窗体，说实话，百度地图的信息窗体样式真的很丑，动态切换显隐，偶尔还会出现内容不能完全展示的情况。
     <bm-info-window
       v-if="infoWindow.show" // 有时候show属性不好用，就用v-if控制他显示隐藏，
       ref="infoWindow"
       :position="infoWindow.postition"
       :title="infoWindow.title"
       :show="infoWindow.show"
       :close-on-click="false"
       :auto-pan="true"
       @close="handleInfoWindowClose"
       @open="handleInfoWindowOpen"
       @clickclose="handleInfoWindowClickClose"
     >
       <div class="info-cont">
         //定义你自己的信息窗体的内容。
       </div>
     </bm-info-window>
</baidu-map>
<script>
export default {
	data() {
		return {
			//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
			//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
			center: {lng: 0, lat: 0},
      		zoom: 3,
      		map: null,
      		BMap: null,
      		markerPoint: {lng: 116.404, lat: 39.915},
      		markerRotation: 0,
      		points: [], //Array[Point] 例[{lng: 116.404, lat: 39.915}, {lng: 117.404, lat: 40.915}]
      		lineData: [{
      			line: [{lng: 116.404, lat: 39.915}, {lng: 117.404, lat: 39.915}],
      			color: 'red'
			}],
			infoWindow: {
				show: false,
				position: {},
				title: '',
			}
		}
	},
	methods: {
		//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
		handler ({BMap, map}) {
	      this.map = map
	      this.BMap = BMap
	      this.center.lng = 116.404
	      this.center.lat = 39.915
	      this.zoom = 15
	    },
	    clickHandler(e) {
			console.log(e)
		},
		handleInfoWindowOpen() {
	      this.diseaseWindow.show = true
	    },
		handleInfoWindowClose() {
			this.infoWindow.show = false
		},
		handleInfoWindowClickClose() {
	      this.diseaseWindow.show = false
	      this.diseaseWindow.position = {}
	      this.$refs.diseaseWindow.redraw()
	    },
	}
}
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83

    五. 第三方组件库（点聚合）

    <template>
	<div class="container">
		<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
			<bml-marker-clusterer v-if="markers.length > 0" :average-center="true" :styles="styles">
		       <bm-marker
		          v-for="marker in markers"
		          :key="marker.name"
		          :position="{lat: marker.latitude, lng: marker.longitude}"
		          :rotation="marker.rotation"
		          :icon="{url: (marker.using ? require('@/assets/marker_on.png') : require('@/assets/marker_off.png')),size:{width:69,height:51}, opts: {imageSize: {width: 69,height: 51}}}"
		          :top="true"
		          @click="handleShow(marker)"
		        >
		          <bm-label
		            v-if="marker.markerKey === curMarker.markerKey"
		            :content="marker.name"
		            :label-style="{borderRadius: '10px', color: '#57a3f3', fontSize : '16px', fontWeight: 'bold', border: 'none', padding: '2px 10px', transform: 'translateX(-50%)'}"
		            :offset="{height: -20, width: 32}"
		          />
		        </bm-marker>
		     </bml-marker-clusterer>
		</baidu-map>
	</div>
</template>
<script>
export default {
	data() {
		return {
			//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
			//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
			center: {lng: 0, lat: 0},
      		zoom: 3,
      		map: null,
      		BMap: null,
      		markers: [{ // 根据后台返回数据定义
				name: 'marker1',
				latitude: 116.404,
				longitude: 39.915,
				rotation: 0,
				using: false, // 根据此来显示不同的单个marker点的图标
			}],
			curMarker: {}
		}
	},
	methods: {
		//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
		handler ({BMap, map}) {
	      this.map = map
	      this.BMap = BMap
	      this.center.lng = 116.404
	      this.center.lat = 39.915
	      this.zoom = 15
	    },
	    handleShow(marker) {
	    	// 点击后，该marker显示label信息
	    	this.curMarker = marker
	    }
	}
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    六. 使用中遇到的问题（未解决）

    1. 个性化地图后，当缩放到zoom = 5 的时候，世界地图会出现一条空白
    2. 个性化地图后，缩放浏览器，再移动地图，地图上的文字会出现重叠，我试过官方例子也有这个问题。

    各位大佬们，如果你们有解决方法，可以私我，谢谢各位大佬

  • 相关阅读:
    Ton 区块链的官方 类ERC20-Token 智能合约代码-Transfer部分解析
    禁忌搜索算法TS求解TSP问题
    【GPGPU编程模型与架构原理】第一章 1.3 现代 GPGPU 产品
    SAP 电商云 Spartacus UI 去除 Checkout 页面 header 和 footer 区域的几种方法介绍
    【JavaScript】判断对象是否具有某个属性
    学习自媒体运营方法，这些你需要了解，带你快速实现变现
    字节跳动面试官：SpringBoot统一接口返回和全局异常处理怎么玩？
    Python 中的 Elias Delta 编码
    Element-Ui+Vue实现首页布局（带收缩展开效果）
    Elasticsearch RestHighLevelClient API 使用总结
  • 原文地址：https://blog.csdn.net/qq_38475901/article/details/126583423