前段时间忙着考研，半年多没有写简书...直到发现我之前的文章原来一直有人读= =！于是决定重新写写小功能，码码字吧~
这次的主题依旧是“数据可视化”，是一个简易又实用的小功能：在文本框内输入特定的地点，点击确认，下方的地图将出现该目的地的位置。
工具：echarts + 百度地图API + webstorm
语言（框架）：html + css + Javascript（jquery）
原理：原理十分易懂。
1、用户输入目的地后，获取用户输入的内容；
2、然后发送一条http/https请求到百度地图，查询并获取到该地点的准确经度和纬度；
3、最后将获取得到的经纬度传入echarts，在地图上标出相应位置；
第一步：简单构建页面布局
<!DOCTYPE html>
<html>
<title>利用百度地图API标记目的地</title>
<head>
<meta charset="utf-8">
<script src="JSlib/jquery.min.js"></script>
<script src="JSlib/echarts.min.js"></script>
<script src="JSlib/china.js"></script>
<style>
html,body{
width:100%;
font-family: Microsoft Yahei;
background-color:#404a59;
}
h2{
text-align:center;
color:#fff;
}
.container{
text-align:center;
margin-top:40px;
}
.input-place{
width:300px;
height:30px;
font-size:20px;
font-family: Microsoft Yahei;
}
.confirm-button{
width:80px;
height:35px;
font-size:20px;
font-family: Microsoft Yahei;
}
#main{
width:800px;
height:600px;
margin:20px auto;
}
</style>
</head>
<body>
<h2>利用百度地图API标记目的地</h2>
<div class="container">
<input type="text" placeholder="请输入地点" class="input-place"></input>
<input type="button" value="确定" class="confirm-button"></input>
</div>
<div id="main">
<script src="script.js"></script>
</div>
</body>
</html>
第二步：阅读百度地图官方文档，申请开发者秘钥（ak）
1.png
2.png
第三步：获取相关数据，传入地图（这里注意：用户可以不断添加新的目的地，将多个目的地同时展示在地图上，因此可考虑使用数组将每次获取的数据存放起来，再更新地图。详细可看代码注释）
var placeInput = $(".input-place"); //利用jquery取得文本框对象
var buttonConfirm = $(".confirm-button"); //利用jquery取得按钮对象
var token = ' '; //此为百度地图上注册获取的秘钥（ak），个人可以申请
var myChart = echarts.init(document.getElementById('main'));
var dataStore = []; //声明用于存放目的地名称和经纬度的数组
option = {
tooltip: {
trigger: 'item'
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
roam: true,
series: [
{
name: '目的地',
type: 'scatter',
coordinateSystem: 'geo',
data: dataStore, //刚开始为空数组
symbolSize: 12
}
]
}
myChart.setOption(option);
buttonConfirm.on("click",function(){
//获取文本框内容
var place = placeInput.val();
//按照百度地图官方格式书写url请求
var url = "http://api.map.baidu.com/geocoder/v2/?output=json&ak=" + token + "&address=" + place + "&callback=?";
if(place){
//利用getJSON方法提交请求
$.getJSON(url,function(res){
if(res.status === 0){
//获取目的地经纬度（查看百度地图官方文档）
var loc = res.result.location;
//数组中存放一个个新添加的对象，包括目的地名称和经纬度
dataStore.push({
name:place,
value:[loc.lng,loc.lat]
})
//执行函数，显示目的地
drawMap();
}
else{
alert("百度地图找不到该地方！");
}
})
}
})
//函数定义
function drawMap(){
//将已更新的数组赋值到图表当中
option.series.data = dataStore;
//更新图表
myChart.setOption(option);
}
最终效果：
3.png
4.png
5.png
