欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue:如何在地图上添加自定义覆盖物(点)

程序员文章站 2022-06-30 23:53:05
[toc] 首发日期:2019 1 25 如何在地图上添加自定义覆盖物(点) 此文重点是在地图上标点,所以就省去引入百度地图的步骤了。 先给一下最终的效果。 这个效果主要是利用百度地图的“覆盖物”来实现的。 由于我做的这个要求显示不同的颜色来代表不同的所属者,所以就做的麻烦一点。 如果你的需求不要求 ......

目录

首发日期:2019-1-25


如何在地图上添加自定义覆盖物(点)



此文重点是在地图上标点,所以就省去引入百度地图的步骤了。


先给一下最终的效果。
Vue:如何在地图上添加自定义覆盖物(点)


这个效果主要是利用百度地图的“覆盖物”来实现的。
由于我做的这个要求显示不同的颜色来代表不同的所属者,所以就做的麻烦一点。


如果你的需求不要求特别显示,那么可以使用bm-marker
Vue:如何在地图上添加自定义覆盖物(点)

代码大致如下:

<baidu-map  class="bm-view"  ak="省略" :center="省略">
     <bm-marker v-for="item in 省略"  :key="item.省略" :position="{lng: item.longitude, lat: item.latitude}" ></bm-marker>
</baidu-map>
  • 上面的代码中position里面的值是经纬度。有了经纬度来能够标上点。
  • ak是你申请的百度api的key
  • center是城市中心




如果你希望使用特别的图标来给标上全部点,那么也可以使用bm-marker,它里面有一个icon属性,icon里面的图片可以用来标点:

<baidu-map  class="bm-view"  ak="省略" :center="省略">
    <bm-marker v-for="item in 省略"  :key="item.省略" :position="{lng: item.longitude, lat: item.latitude}"  :icon="{url: 'https://www.cnblogs.com/images/cnblogs_com/progor/1390402/o_bike2.png', size: {width: 32, height: 32}}"></bm-marker>
</baidu-map>
  • icon中的url是图片的url路径。

Vue:如何在地图上添加自定义覆盖物(点)




如果你想要显示多种覆盖物,那么你可以使用overlay。(要封装,因为封装之后才能传值进去指定显示什么覆盖物)
简单的overlay是这样子的:
Vue:如何在地图上添加自定义覆盖物(点)

为什么可以基于这个组件来封装是因为这个组件有以下几个好处:

  1. 可以定制文本内容
  2. 它本身是一个元素,而不是一个图片,(上面的“打点物”都是图片(小红点不确定是不是,可能是一个字体图标的东西)),因为是元素,所以我们能够使用border,background,color等等样式来处理这个元素。


需求实现步骤:
1.定义一个myoverlay:

<template>
  <bm-overlay
    ref="customoverlay"
    :class="{sample: true}"
    :style="pointcolor"
    pane="labelpane"
    @draw="draw">
  </bm-overlay>
</template>

<script>
import { bmoverlay } from 'vue-baidu-map'
export default {
  props: ['text', 'position', 'color'], // 用来接受传入的值,用来定制样式
  components: {
    bmoverlay
  },
  watch: {
    position: {
      handler () {
        this.$refs.customoverlay.reload()  // 当位置发生变化时,重新渲染,内部会调用draw
      },
      deep: true
    }
  },
  data () {
    return {
      pointcolor: ''
    }
  },
  mounted () {
    this.pointcolor = this.color // 这里我是用来获取传入的值来定义样式的,可能有点多余了,pointcolor是组件中绑定的样式,color是传进来的样式。【这样就可以根据传入的样式来显示不同样子的点了】
  },
  methods: {
    // 这是百度地图的重绘函数,用于维持覆盖物的位置(这里的值貌似会影响拖拉时的偏移度)
    draw ({ el, bmap, map }) {
      const { lng, lat } = this.position
      const pixel = map.pointtooverlaypixel(new bmap.point(lng, lat))
      el.style.left = pixel.x - 16 + 'px'
      el.style.top = pixel.y - 16 + 'px'
    }
  }
}
</script>

<style>
.sample {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  position: absolute;
}
.sample.active {
  background: rgba(0,0,0,0.75);
  color: #fff;
}
</style>


2.使用myoverlay,传给它需要的值:

<baidu-map  class="bm-view"  ak="省略" :center="省略">
    my-overlay
                v-for="item in 省略"  :key="item.省略" :position="{lng: item.longitude, lat: item.latitude}"
                :text="item.省略"
                :color='省略(这里可以处理一下从而给每一个组件实例都传入自定义的值)'
               >
              </my-overlay>
</baidu-map>

想了解更多,可以查看vue百度地图api的官网:https://dafrok.github.io/vue-baidu-map/#/