数据可视化玩法之二：echarts+百度地图API=？

前段时间忙着考研，半年多没有写...直到发现我之前的文章原来一直有人读= =！于是决定重新写写小功能，码码字吧~

这次的主题依旧是“数据可视化”，是一个简易又实用的小功能：在文本框内输入特定的地点，点击确认，下方的地图将出现该目的地的位置。

工具：echarts + 百度地图API + webstorm

语言（框架）：html + css + Javascript（jquery）

原理：原理十分易懂。

1、用户输入目的地后，获取用户输入的内容；

2、然后发送一条http/https请求到百度地图，查询并获取到该地点的准确经度和纬度；

3、最后将获取得到的经纬度传入echarts，在地图上标出相应位置；

第一步：简单构建页面布局

    
    
        
        
        
        
        
    
    
        
利用百度地图API标记目的地
        

            
            
        
        

            
        
    

第二步：阅读百度地图官方文档，申请开发者秘钥（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