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

最新推荐文章于 2025-06-08 23:09:55 发布

仰望星空的包子

最新推荐文章于 2025-06-08 23:09:55 发布

阅读量9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/sinat_21206105/article/details/68065834

JavaScript学习专栏收录该内容

22 篇文章

订阅专栏

本文展示了如何结合ECharts库和百度地图API，根据输入的地址获取经纬度并绘制地图。用户输入地址后，点击搜索按钮，通过jQuery获取JSON数据，将地点位置以散点形式显示在中国地图上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是我的代码

<!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>