06/step3.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')

eSearchBtn.click(function() {
  var place = ePlaceInput.val()
  if (place) {
    $.getJSON(url + place + '&callback=?', function(res) {
      if (res.status === 0) {
        console.log(place, res.result)
      }else{
        alert('百度没有找到地址信息')
      }
    })
  }
})


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