当前位置:   article > 正文

vue-baidu-map插件中bm-marker组件嵌套bm-info-window组件使用,在地图上生成多个点_bm-label

bm-label

template:

  1. markers: [
  2. {
  3. lng: 113.001546,
  4. lat: 28.20648,
  5. name: "测试矛盾111",
  6. showFlag: false //flag放在每一条数据里
  7. },
  8. {
  9. lng: 113.001546,
  10. lat: 27.20648,
  11. name: "测试矛盾112",
  12. showFlag: false
  13. }
  14. ],

data:

  1. markers: [
  2. {
  3. lng: 113.001546,
  4. lat: 28.20648,
  5. name: "测试矛盾111",
  6. showFlag: false //flag放在每一条数据里
  7. },
  8. {
  9. lng: 113.001546,
  10. lat: 27.20648,
  11. name: "测试矛盾112",
  12. showFlag: false
  13. }
  14. ]

method:

  1. // 点击点坐标赋值
  2. lookDetail(marker) {
  3. marker.showFlag = true;
  4. this.infoWindow.info = marker;
  5. },
  6. // 关闭弹窗
  7. infoWindowClose(marker) {
  8. marker.showFlag = false;
  9. },
  10. // 打开弹窗
  11. infoWindowOpen(marker) {
  12. marker.showFlag = true;
  13. },

3. 使用 <bm-label> 点位置添加标注

  1. <bm-marker>
  2. <bm-label
  3. content="1"
  4. :labelStyle="{color: '#fff', fontSize : '12px',background:'rgba(0, 0, 0, 0)',borderColor:'rgba(0, 0, 0, 0)'}"
  5. :offset="{width: 4,height:2 }"
  6. />
  7. </bm-marker>
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/109757
推荐阅读