天天看點

vue-baidu-map 添加一個自定義圖示的點 但如何讓自定義的圖檔居中顯示(完全顯示)

vue-baidu-map 添加一個自定義圖示的點 但如何讓自定義的圖檔居中顯示(完全顯示)

由于我去提問專欄裡提問 不管我怎麼修改都是顯示有非法字元無法釋出,是以我在此處提問下,會的大佬評論賜教下,謝謝

<baidu-map class="mapDemo"
               :scroll-wheel-zoom="true"
               :center="center"
               :zoom="zoom"
               @ready="handler"
               ak="UvaCE1b5u2LGdxZwLtvSTtjj7Q3KdXja">
        <bm-marker 
        :position="{lng: 116.404, lat: 39.915}" 
        :dragging="true"
        :icon="{url:require('../../assets/img/a.jpg'),backgroundPosition:center, size: {width: 150, height: 300}}" 
        animation="BMAP_ANIMATION_BOUNCE">
        </bm-marker>
    </baidu-map>
           
<script>
import {BaiduMap ,BmMarker,BmLabel} from 'vue-baidu-map';
export default {
  name: "my",
  components:{
    BaiduMap,
    BmMarker,
    BmLabel
  },
  data() {
    return {
      center: {lng: 116.404, lat: 39.915},
      zoom: 15,
      labelStyle:{color: 'red', fontSize : '24px'}
    };
  },
  mounted() {
  },
  methods: {
    //地圖
      handler ({BMap, map}) {
      console.log(BMap, map)
    }
  }
};
</script>
           

效果是這樣的:

vue-baidu-map 添加一個自定義圖示的點 但如何讓自定義的圖檔居中顯示(完全顯示)

實際圖檔是這樣的:

vue-baidu-map 添加一個自定義圖示的點 但如何讓自定義的圖檔居中顯示(完全顯示)

求大佬解答賜教!

随後研究後得出結論:

{
  url: String,
  size: Size,
  opts: {
    anchor: Size,
    imageOffset: Size,
    imageSize: Size,
    infoWindowAnchor: Size,
    printImageUrl: String
  }
}
//bm-marker裡的icon屬性共有以上幾個,其中imageSize屬性就可以實作
           
vue-baidu-map 添加一個自定義圖示的點 但如何讓自定義的圖檔居中顯示(完全顯示)