百度地图标记学习

<!DOCTYPE html>  
<html>  
<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>  
  <div>  
    <div class="col-md-3 col-md-offset-3">  
      <form>  
        <input id="place-input" type="text" value="天津" placeholder="请输入地址">  
        <button type="button" id="search-btn" class="btn btn-success">  
          查询  
        </button>  
      </form>  
    </div>  
    <div>  
      <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/

欢迎分享本文,转载请保留出处:前端ABC » 百度地图标记学习

赞 (1)
分享到:更多 ()

发表评论 0