标签：pointerData map Vue point 地图 BMap new lng 百度

<template>
  <div>
    <div style="min-width:100%;min-height: 400px;" ref="baiduMapDiv" :id="elementId"></div>
  </div>
</template>
<script>
/* global BMap, BMAP_ANCHOR_TOP_LEFT */
export default {
  data () {
    return {
      baiduMap: null
    }
  },
  props: ['elementId', 'pointerData', 'isView'],
  methods: {
    createMap: function () {
      var map = new BMap.Map(this.elementId)
      // 启用滚轮放大缩小，默认禁用
      map.enableScrollWheelZoom()
      // 启用地图惯性拖拽，默认禁用
      map.enableContinuousZoom()
      // 启用地图拖拽
      map.enableDragging()
      // 双指缩放
      map.enablePinchToZoom()

      // 设置中心点
      var point = new BMap.Point(112.948919, 28.236163)
      map.centerAndZoom(point, 12)

      // 添加缩放按钮和比例尺
      const topLeftControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })
      const topLeftNavigation = new BMap.NavigationControl()

      map.addControl(topLeftControl)
      map.addControl(topLeftNavigation)

      this.baiduMap = map
    },
    setMarker: function(pointerData) {
      this.baiduMap.clearOverlays()
      var myIcon = new BMap.Icon('../../../../static/images/position.png', new BMap.Size(50, 50), {
        // 指定定位位置。
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
        // 图标中央下端的尖角位置。
        anchor: new BMap.Size(5, 50)
      })
      if (pointerData && pointerData.lng) {
        var tmpPoint = new BMap.Point(pointerData.lng, pointerData.lat)
          // 标点
        var marker = new BMap.Marker(tmpPoint, { icon: myIcon })
          // 加入地图
        this.baiduMap.addOverlay(marker)
      }
    }
  },
  watch: {
    'pointerData': {
      handler: function(newValue, oldValue) {
        this.baiduMap.clearOverlays()
        this.setMarker({
          lng: newValue.lng,
          lat: newValue.lat
        })
      },
      deep: true
    }
  },
  mounted () {
    this.createMap()
    this.setMarker(this.pointerData)
    var self = this
    if (!this.isView) {
      this.baiduMap.addEventListener('click', function(e) {
        self.$emit('update:pointerData', {
          lng: e.point.lng,
          lat: e.point.lat
        })
     // alert(e.point.lng + ',' + e.point.lat)
      })
    }
  }
}
</script>

标签：pointerData,map,Vue,point,地图,BMap,new,lng,百度
来源： https://blog.csdn.net/qq_33188846/article/details/94900554

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。