前端ABC<!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/