您的位置：首页 > 其它

使用echarts和百度地图经纬度绘制地图

2017-03-29 15:48 711 查看

以下是我的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- <script type="text/javascript" src="js/bootstrap.min.js"></script> -->
<style type="text/css" media="screen">
.container{margin-top:100px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<form action="" class="form-horizontal">
<input id="place-input" type="text" name="" class="form-control" placeholder="enter address" value="长沙">
<button type="button" id="add-btn" class="btn btn-success">search</button>
</form>
</div>
<div class="col-md-6">
<div id="main" style="height: 500px;"></div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript">
var token='XIxs9YC0wXa86WfWQGBM89qyohwGoXkx';
var url="http://api.map.baidu.com/geocoder/v2/?output=json&ak="+token+'&address=';
var placeInput=$("#place-input");
var searchBtn=$("#add-btn");
var myChart=echarts.init(document.getElementById('main'));
var charData=[];
searchBtn.click(function(){
var place=placeInput.val();
if(place){
$.getJSON(url+place+'&callback=?',function(res){
var loc;
if(res.status===0){
// console.log(place,res.result);
loc=res.result.location;
charData.push({name:name,value:[loc.lng,loc.lat]})
drawMap(place);
}
else{
alert('百度没有找到地址信息');
}
})
}
})
function drawMap(name,loc){
var option={
backgroundColor:'red',
title:{
text:'地址搜索',
left:'center',
textStyle:{
color:'#fff'
}
},
tooltip:{
trigger:'item'
},
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:[{
// 	name:name,
// 	value:[loc.lng,loc.lat]
// }],
data:charData,
symbolSize:function(val){
return 10;
},
}]
}
myChart.setOption(option);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航