使用Echart搭配百度地图创建某一地区热点图的注意点

使用Echart搭配百度地图创建的热点图,为网友免费做的demo,细节没有调整.记录一下写的过程.

 

效果图:

代码:

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body style="height: 100%; margin: 0">
<div id="container"
     style="height: 600px;width: 600px;margin: 20px auto;position: relative;top: 50%;margin-top: -300px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/examples/vendors/jquery/jquery.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript"
        src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=NqENdsDTP1QxhUn047Z7C6Tfsgv5X1mj"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
  var dom = document.getElementById('container')
  var myChart = echarts.init(dom)
  var app = {}
  option = null
  app.title = '热力图与百度地图扩展'
  var points = [
    [114.295024, 22.632375],
    [114.295124, 22.632475],
    [114.295224, 22.632575],
    [114.295324, 22.632675],
    [114.295424, 22.632775],
    [114.295524, 22.632875],
    [114.295624, 22.632975],
    [114.295724, 22.633075],
    [114.295824, 22.633175],
    [114.295924, 22.633275],
    [114.296024, 22.633375],
    [114.296124, 22.633475],
    [114.296224, 22.633575],
    [114.296324, 22.633675],
    [114.296424, 22.633775],
    [114.296524, 22.633875],
    [114.296624, 22.633975],
    [114.296724, 22.634075],
    [114.296824, 22.634175],
    [114.296924, 22.634275],
    [114.297024, 22.634375],
    [114.297124, 22.634475],
    [114.297224, 22.634575],
    [114.297324, 22.634675],
    [114.297424, 22.634775],
    [114.297524, 22.634875],
    [114.297624, 22.634975],
    [114.297724, 22.635075],
    [114.297824, 22.635175],
    [114.297924, 22.635275],
    [114.298024, 22.635375],
    [114.298124, 22.635475],
    [114.298224, 22.635575],
    [114.298324, 22.635675],
    [114.298424, 22.635775],
    [114.298524, 22.635875],
    [114.298624, 22.635975],
    [114.298724, 22.636075],
    [114.298824, 22.636175],
    [114.298924, 22.636275],
    [114.299024, 22.636375],
    [114.299124, 22.636475],
    [114.299224, 22.636575],
    [114.299324, 22.636675],
    [114.299424, 22.636775],
    [114.299524, 22.636875],
    [114.299624, 22.636975],
    [114.299724, 22.637075],
    [114.299824, 22.637175],
    [114.299924, 22.637275]]
  myChart.setOption(option = {
    animation: false,
    bmap: {
      center: [114.294924, 22.632275],
      zoom: 15,
      roam: false,
      mapStyle: {style: 'midnight'},
      enableMapClick:false
    },
    visualMap: {
      show: false,
      top: 'top',
      min: 0,
      max: 5,
      seriesIndex: 0,
      calculable: false,
      inRange: {
        color: ['blue', 'blue', 'green', 'yellow', 'red']
      }
    },
    series: [{
      type: 'heatmap',
      coordinateSystem: 'bmap',
      data: points,
      pointSize: 5,
      blurSize: 6
    }]
  })

  var markerDataArr = [
    {num: 1, point: [114.294924, 22.632275], imgurl: '', text: '东部华侨城'},
    {num: 2, point: [114.295031, 22.624567], imgurl: '', text: '东部华侨城大峡谷'},
    {num: 3, point: [114.309861, 22.614975], imgurl: '', text: '茶溪谷大峡谷'},
    {num: 4, point: [114.30691, 22.623766], imgurl: '', text: '华侨酒店'},
    {num: 6, point: [114.312242, 22.610332], imgurl: '', text: '华侨城总站'},
    {num: 7, point: [114.30165, 22.614285], imgurl: '', text: '东部华侨城天麓'},
    {num: 8, point: [114.284623, 22.636045], imgurl: '', text: '茵特拉根会议中心'},
    {num: 9, point: [114.286962, 22.638202], imgurl: '', text: '东部华侨城茶溪谷'},
    {num: 10, point: [114.283761, 22.647719], imgurl: '', text: '三洲田水库'}
  ]

  if (!app.inNode) {
    // 添加百度地图插件
    var bmap = myChart.getModel().getComponent('bmap').getBMap()
    // bmap.setEnableMapClick('false')
    //MapOptions{ enableMapClick:false}
    var myIcon = new BMap.Icon('./0.png', new BMap.Size(42, 56))
    for (var i = 0; i < markerDataArr.length; i++) {
      var item = markerDataArr[i]
      var pointItem = new BMap.Point(item.point[0], item.point[1])
      var opts = {
        position: pointItem,    // 指定文本标注所在的地理位置
        offset: new BMap.Size(-30, 30)    //设置文本偏移量
      }
      var label = new BMap.Label(item.text, opts)  // 创建文本标注对象
      label.setStyle({
        color: '#fff',
        backgroundColor: 'transform',
        border: 'none',
        fontSize: '12px',
        fontFamily: '微软雅黑'
      })
      var mapMaker = new BMap.Marker(pointItem, {icon: myIcon})
      bmap.addOverlay(mapMaker)
      bmap.addOverlay(label)
    }
  }
</script>
</body>
</html>

 

代码解释及注意点:

1. 搭配地图插件需要引入相应的库
2. 使用

   var bmap = myChart.getModel().getComponent('bmap').getBMap()  // 获取百度地图对象 从而使用地图api

3. 多查API,对比官方给出的例子,不是太难的功能都能做出的出来