vue百度地图中显示多个不同的icon覆盖点

最新推荐文章于 2024-07-15 15:31:14 发布

xx_小熊

最新推荐文章于 2024-07-15 15:31:14 发布

阅读量2.5k

点赞数 6

文章标签： vue

本文链接：https://blog.csdn.net/qq_42975998/article/details/106457232

版权

实现效果：
在这里插入图片描述

vue2.x百度地图官网：

https://dafrok.github.io/vue-baidu-map/#/zh/index

百度地图开发者平台申请的密钥ak：

http://lbsyun.baidu.com/apiconsole/key

官网的API还是比较全面的，日常功能都能实现，简单易上手。

简单介绍一下用法：

安装：

npm install vue-baidu-map --save

注册（只是实现某一功能的话，建议在组件内按需引入，减少工程打包后的体积）：

<script>
	import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
	import {BmMarker} from 'vue-baidu-map'
	export default {
	  components:{BaiduMap, BmMarker},
	}
</script>

所有代码：

<template>
  <div>
<!--    center和zoom属性必须要有，否则地图不渲染。-->
<!--    @ready：地图 API 加载完毕后执行的代码，不要在 vue 自身的生命周期中调用 BMap 类-->
<!--    ak:百度地图密钥，没有会报错-->
    <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" ak="Ya89rxRsV1HMjGGGS7z37RfFHpSIVk2l">
<!--      这里使用<template>循环只是为了减少代码结构，使用<div>循环效果一样的，看个人习惯-->
      <template v-for="(item,index) in points">
        <bm-marker :key="index" :position="item.site" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: item.url, size: {width: 32, height: 32}}"></bm-marker>
      </template>
    </baidu-map>
  </div>
</template>

<script>
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    import {BmMarker} from 'vue-baidu-map'
    export default {
        components:{BaiduMap, BmMarker},
        data(){
            return{
                center: {lng: 0, lat: 0},
                zoom: 3,
                points: [],
            }
        },
        methods: {
            handler ({BMap, map}) {
                console.log(BMap, map)
                // 地图中心点
                this.center.lng = 116.404
                this.center.lat = 39.915
                this.zoom = 15
                this.addPoints()
            },
            addPoints () {
                // 随便给的几个点
                this.points = [
                    {
                        site:{lng: 116.404, lat: 39.918},
                        id: 3,
                        url: ''
                    },
                    {
                        site:{lng: 116.410, lat: 39.916},
                        id: 2,
                        url: ''
                    },
                    {
                        site:{lng: 116.400, lat: 39.914},
                        id: 1,
                        url: ''
                    },
                    {
                        site:{lng: 116.408, lat: 39.918},
                        id: 3,
                        url: ''
                    },
                    {
                        site:{lng: 116.406, lat: 39.920},
                        id: 2,
                        url: ''
                    },
                    {
                        site:{lng: 116.410, lat: 39.910},
                        id: 1,
                        url: ''
                    }
                ]
                // 根据id区别图标，相对路径要使用require()
                for(let item of this.points){
                    let path = ''
                    switch (item.id) {
                        case 1:
                            path = require('../assets/store.png')
                            break;
                        case 2:
                            path = require('../assets/hospital.png')
                            break;
                        case 3:
                            path = require('../assets/restrant.png')
                            break;
                    }
                    item.url = path
                }
            }
        }
    }
</script>

<style scoped>
  .map {
    width: 100%;
    height: 300px;
  }
</style>