vue 百度地图 气泡图

1,632 阅读2分钟




<template>  <bm-overlay    ref="customOverlay"    :class="{sample: true, active}"    pane="labelPane"    @draw="draw">    <div class='bmoverlay'>      <div class='bmovebox' v-html="text+'<br/>'+text1" @click="handleClick">{{text}}</div>    </div>  </bm-overlay></template><script>export default {  props: ['text', 'text1', 'position', 'active'],  watch: {    position: {      handler () {        this.$refs.customOverlay.reload()      },      deep: true    }  },  methods: {    handleClick () {      global.alert('Well done.')    },    draw ({el, BMap, map}) {      const {lng, lat} = this.position      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))      el.style.left = pixel.x - 60 + 'px'      el.style.top = pixel.y - 20 + 'px'    }  }}</script><style>.bmoverlay{  width: 100%;  height: 100%;  background: rgba(186,23,18,1);  border-radius: 50%;  padding:2px;  display: flex;  align-items: left;  justify-content:space-around;   flex-direction: column;}.bmovebox{}.sample {  width: 120px;  height: 120px;  line-height: 20px;  border:3px solid  rgba(224,32,32,0.4);  overflow: hidden;  /* box-shadow: 0 0 5px #000; */  color: #fff;  display: flex;  align-items: left;  justify-content:space-around;   flex-direction: column;  padding-top: 120px;  display: table-cell;  vertical-align:middle;  text-align: center;  padding: 10px;  position: absolute;  top: 10px;  border-radius: 50%;}.sample.active {  background: rgba(186,23,18,0.75);  color: #fff;}</style>

<template> <div class='amount'>  <baidu-map class="map" :center="{lng: 106.464029, lat: 29.547749}" :zoom="12">     <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>    <my-overlay      :position="{lng: 106.464029, lat: 29.547749}"      text="沙坪坝区"      text1="热度 6000"      :active="active"      @mouseover.native="active = true"      @mouseleave.native="active = false">    </my-overlay>     <my-overlay      :position="{lng: 106.579012, lat: 29.613082}"      text="江北区"      text1="热度 6000"      :active="active"      @mouseover.native="active = true"      @mouseleave.native="active = false">    </my-overlay>    <my-overlay      :position="{lng: 106.754843, lat: 29.748264}"      text="渝北区"      text1="热度 6000"      :active="active"      @mouseover.native="active = true"      @mouseleave.native="active = false">    </my-overlay>    <my-overlay      :position="{lng: 106.400559, lat: 29.812409}"      text="北碚区"      text1="热度 6000"      :active="active"      @mouseover.native="active = true"      @mouseleave.native="active = false">    </my-overlay>    <my-overlay      :position="{lng: 106.666279, lat: 29.502902}"      text="南岸区"      text1="热度 6000"      :active="active"      @mouseover.native="active = true"      @mouseleave.native="active = false">    </my-overlay>    <my-overlay      :position="{lng: 106.517376, lat: 29.507051}"      text="九龙坡区"      text1="热度 6000"      :active="active"      @mouseover.native="active = true"      @mouseleave.native="active = false">    </my-overlay>    <my-overlay      :position="{lng: 106.482881, lat: 29.490453}"      text="大渡口区"      text1="热度 6000"      :active="active"      @mouseover.native="active = true"      @mouseleave.native="active = false">    </my-overlay>    <my-overlay      :position="{lng: 106.583096, lat: 29.567178}"      text="渝中区"      text1="热度 6000"      :active="active"      @mouseover.native="active = true"      @mouseleave.native="active = false">    </my-overlay>  </baidu-map> </div></template><script>import MyOverlay from './../components/MyOverlay.vue'export default {  data () {    return {      active: false,      circlePath: {        center: {          lng: 106.464029,          lat: 29.547749        },        radius: 5000      }    }  },  components: {    MyOverlay  },  methods: {    updateCirclePath (e) {      this.circlePath.center = e.target.getCenter()      this.circlePath.radius = e.target.getRadius()    }  }}</script><style lang='less' scoped>.map {  width: 100%;  height: 800px;}</style>