地图标记（学习笔记）

最新推荐文章于 2022-09-13 11:15:11 发布

Missj1218

最新推荐文章于 2022-09-13 11:15:11 发布

阅读量1k

点赞数

分类专栏： HTML5应用开发文章标签： echart 地图 canvas

本文链接：https://blog.csdn.net/u013096666/article/details/56489820

版权

HTML5应用开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

地图标记学习视频：http://www.imooc.com/learn/687

Demo和学习笔记

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Echarts</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
    body{
      padding-top:80px
    }
    #search-btn{
      margin-top: 20px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-3 col-md-offset-3">
      <form class="form-horizontal">
        <input id="place-input" type="text" class="form-control" value="天津" placeholder="请输入地址">
        <button type="button" id="search-btn" class="btn btn-success">
          查询
        </button>
      </form>

    </div>
    <div class="col-md-6">
      <div id="main" style="height:500px;"></div>
    </div>
  </div>
</div>  
<script src='js/jquery.js'></script>
<script src='js/echarts.min.js'></script>
<script src='js/china.js'></script>

<script>  

// 百度地图的开发者秘钥
var token = 'clR7lmWlaguV9WUYKM7OGMbj'
//拼写URL
var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address='
//获取控件
var ePlaceInput = $('#place-input')
var eSearchBtn = $('#search-btn')
//初始化图表
var myChart = echarts.init(document.getElementById('main'))
var chartData = []
//点击事件
eSearchBtn.click(function() {
  var place = ePlaceInput.val()
  if (place) {
    $.getJSON(url + place + '&callback=?', function(res) {
      var loc
      if (res.status === 0) {
        loc = res.result.location
        //将获取的经纬度放入数组中
        chartData.push({
          name: name,
          value: [loc.lng, loc.lat]
        })
        drawMap(place)
      }else{
        alert('百度没有找到地址信息')
      }
    })
  }
})

//描绘图表
function drawMap(name) {

  var option = {
    backgroundColor: '#404a59',
    title: {
      text: '2017想要去的地方',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    geo: {
      map: 'china',
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: '#323c48',
          borderColor: '#111'
        },
        emphasis: {
          areaColor: '#2a333d'
        }
      }
    },
    series: [{
      name: '地址',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: chartData,
      symbolSize: function(val) {
        return 10;
      },
    }]
  }
  myChart.setOption(option)
}

</script>
</body>
</html>

总结

Echarts图表下载：http://echarts.baidu.com/

百度地图接口API：http://lbsyun.baidu.com/

Bootstrap中文网：http://www.bootcss.com/

Missj1218

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
地图标记（学习笔记）

地图标记学习视频：http://www.imooc.com/learn/687Demo和学习笔记index.html Echarts body{ padding-top:80px } #search-btn{ margin-top: 20px; }
复制链接

扫一扫

专栏目录