<template>
  <div >
    <div :id="id" class="view-map"></div>
  </div>
</template>
<script>
  import address from "../../assets/images/address.png";
  //判断浏览区是否支持canvas
  function isSupportCanvas() {
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
  }
  
  function setGradient() {
    /*格式如下所示:
  		{
  	  		0:'rgb(102, 255, 0)',
  	 	 	.5:'rgb(255, 170, 0)',
  		  	1:'rgb(255, 0, 0)'
  		}*/
    var gradient = {};
    var colors = document.querySelectorAll("input[type='color']");
    colors = [].slice.call(colors, 0);
    colors.forEach(function(ele) {
      gradient[ele.getAttribute("data-key")] = ele.value;
    });
    heatmapOverlay.setOptions({
      "gradient": gradient
    });
  }
  export default {
    name: "viewMap",
    computed:{
      id:function(){
        return new Date().getTime()
      }
    },
    data() {
      return {
        map: "",
        centerPoint: [104.06, 30.67],
        // centerPoint:[116.418261, 39.921984],
        markers: []
      };
    },
    methods: {
      addHeatmap(points) {
        if (!isSupportCanvas()) {
          alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
        }
        var heatmapOverlay = new BMapLib.HeatmapOverlay({
          "radius": 20
        });
         heatmapOverlay.hide();
        this.map.addOverlay(heatmapOverlay);
        heatmapOverlay.setDataSet({
          data: points,
          max: 100
        });
        heatmapOverlay.show();
      },
      addMarker() {
        var Max = 10;
        var pt = null;
        var i = 0;
        for (; i < Max; i++) {
          this.addPoint([Math.random() * 40 + 85, Math.random() * 30 + 21], i)
        }
        var markerClusterer = new BMapLib.MarkerClusterer(this.map, {
          markers: this.markers
        });
      },
      addPoint(point, num) {
        //创建点
        var myIcon = new BMap.Icon(address, new BMap.Size(18, 27));
        var marker = new BMap.Marker(new BMap.Point(...point), {
          icon: myIcon
        });
        this.map.addOverlay(marker);
        var label = new BMap.Label(num, {
          offset: new BMap.Size(4, 2)
        });
        label.setStyle({
          backgroundColor: "transparent",
          color: "white",
          borderWidth: 0,
          textAlign: "center"
        });
        marker.setLabel(label);
        this.markers.push(marker);
      },
      initData(currentCity = "guiyang",callback) {
        this.map = new BMap.Map(""+this.id+"");
        this.map.centerAndZoom(new BMap.Point(...this.centerPoint), 15);
        this.map.addControl(
          new BMap.MapTypeControl({
            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
          })
        );
        this.map.setCurrentCity(currentCity);
        this.map.enableScrollWheelZoom(true);
        var top_left_control = new BMap.ScaleControl({
          anchor: BMAP_ANCHOR_TOP_LEFT
        }); // 左上角，添加比例尺
        var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
        this.map.addControl(top_left_control);
        this.map.addControl(top_left_navigation);
        callback();
        // this.addMarker()
        // })
      }
    },
    mounted() {}
  };
</script>

<style lang="scss" scoped>
  .view-map {
    height: 100%;
    width: 100%;
  }
</style>

