06/step5.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="../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='../jquery.min.js'></script>
<script src='../echarts.min.js'></script>
<script src='../china.js'></script>
<script>  
// 百度地图的开发者秘钥
var token = 'clR7lmWlaguV9WUYKM7OGMbj'
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: '2016要去的地方',
      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>