[学习笔记]用百度地图api快速实现经纬度地理位置可视化

2016年10月29日 4200点热度 0人点赞 1条评论

在数学建模中，常常会有一些地理位置数据。为了快速地展现其位置分布，可以用百度地图api快速实现地理位置可视化。

api001

0.概述

在会遇到一些与地理位置相关的建模问题时，难免会遇到需要可视化展示地理位置信息的需求。

可能许多人的第一反应是：

WTF我没做过前端，也不会js，这个东西怎么办

事实上，队伍内展示，或者只是作为团队内构建道路信息的工具，就可以用在线地图api实现可视化。（开发产品当然另当别论）

本篇学习笔记以百度地图api为例。只要稍微上过大学课程的c++之类的，看得懂一点点代码，就可以按照百度地图api手册给出的demo加以发挥。

1.开发者账户相关

用百度id注册百度地图开放平台，验证手机号和邮箱地址，会获得免费的配额。新建应用，获得秘钥。

包含以下内容及相应配额（懒..直接粘贴的表格）

服务名称	配额消费	配额上限	操作
云存储API（存储）	存储空间： 0%	总存储空间: 10240MB	查看文档数据管理配额申请
云存储API	请求数： 0%	总请求数: 10万次/天	查看文档数据管理流量图配额申请
云检索API	请求数： 0%	总请求数: 10万次/天	查看文档流量图配额申请
Javascript API		无请求数限制	查看文档
Place API v2	请求数： 0%	总请求数: 0.2万次/天	查看文档流量图配额申请
Geocoding API v2	请求数： 0%	总请求数: 0.6万次/天	查看文档流量图配额申请
IP定位API	请求数： 0%	总请求数: 100万次/天	查看文档流量图配额申请
路线交通API	请求数： 0%	总请求数: 0.2万次/天	查看文档流量图配额申请
Android导航离线SDK		无请求数限制
IOS导航离线SDK		无请求数限制
Android导航SDK		无请求数限制	查看文档
IOS导航SDK		无请求数限制
静态图API	请求数： 0%	总请求数: 100万次/天	查看文档流量图配额申请
全景静态图API	请求数： 0%	总请求数: 10万次/天	查看文档
坐标转换API	请求数： 0%	总请求数: 10万次/天	查看文档流量图配额申请
鹰眼API	请求数： 0%	总请求数: 10万次/天	查看文档流量图配额申请
到达圈	请求数： 0%	总请求数: 0.01万次/天
Android导航 HUD SDK		无请求数限制
IOS导航 HUD SDK		无请求数限制
云逆地理编码API	请求数： 0%	总请求数: 0.2万次/天	流量图配额申请
Routematrix API	请求数： 0%	总请求数: 0.2万次/天	流量图配额申请
云地理编码API	请求数： 0%	总请求数: 0.2万次/天
高精度IP定位	请求数： 0%	总请求数: 0.1万次/天	流量图配额申请
时区服务 API	请求数： 0%	总请求数: 0.2万次/天

2.开发手册、demo

百度地图开放平台js开发demo

http://developer.baidu.com/map/jsdemo.htm

对于一种想要展示一系列展示固定点的需求，可以使用“麻点图层”的方法

api003

demo调试界面

3.坐标信息管理

注意到 “geotableId”：

   var customLayer;
    function addCustomLayer(keyword) {
        if (customLayer) {
            map.removeTileLayer(customLayer);
        }
        customLayer=new BMap.CustomLayer({
            geotableId: 30960,
            q: '', //检索关键字
            tags: '', //空格分隔的多字符串
            filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby
        });

麻点图层的原理，是使用百度云存储api（LBS云），送入自己点坐标信息的数据。再通过调用CutsomLayer在地图表层绘制麻点。

在百度云存储api的数据管理页面，可以通过可视化锚点，或者上传规范格式的csv快速添加数据（当然也可以通过get put直接上传，如果没有需求，当然可以只通过上传csv添加数据）

api005

数据管理可视化界面

新建一个数据表，括号内即为geotableId。

csv可以直接下载示例，然后用excel可视化编辑。注意文档中给出的表值定义，不要填错

http://lbsyun.baidu.com/index.php?title=lbscloud/api/geodata

上传后可导入位置信息

4.api使用

官方给出的示例如下

http://developer.baidu.com/map/jsdemo.htm#g0_4

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{
            width: 100%;
            height: 100%;
            margin:0;
            font-family:"微软雅黑";
            font-size:14px;
        }
        #l-map {
            width:100%; 
            height:500px;
            overflow: hidden;
        }
        #result{
            width:100%;
        }
        li{
            line-height:28px;
        }
        .cityList{
            height: 320px;
            width:372px;
            overflow-y:auto;
        }
        .sel_container{
            z-index:9999;
            font-size:12px;
            position:absolute;
            right:0px;
            top:0px;
            width:140px;
            background:rgba(255,255,255,0.8);
            height:30px;
            line-height:30px;
            padding:5px;
        }
        .map_popup {
            position: absolute;
            z-index: 200000;
            width: 382px;
            height: 344px;
            right:0px;
            top:40px;
        }
        .map_popup .popup_main { 
            background:#fff;
            border: 1px solid #8BA4D8;
            height: 100%;
            overflow: hidden;
            position: absolute;
            width: 100%;
            z-index: 2;
        }
        .map_popup .title {
            background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
            color: #6688CC;
            font-weight: bold;
            height: 24px;
            line-height: 25px;
            padding-left: 7px;
        }
        .map_popup button {
            background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
            cursor: pointer;
            height: 12px;
            position: absolute;
            right: 4px;
            top: 6px;
            width: 12px;
        }   
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A4749739227af1618f7b0d1b588c0e85"></script>
    <!-- 加载百度地图样式信息窗口 -->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <!-- 加载城市列表 -->
    <script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
    <title>叠加麻点图层</title>
</head>
<body>
    <div id="l-map"></div>
    <div id="result">
        <button id="open">打开</button><button id="close">关闭</button>
    </div>
    <!--城市列表-->
    <div class="sel_container"><strong id="curCity">北京市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div>
    <div class="map_popup" id="cityList" style="display:none;">
        <div class="popup_main">
            <div class="title">城市列表</div>
            <div class="cityList" id="citylist_container"></div>
            <button id="popup_close"></button>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");          // 创建地图实例
    var point = new BMap.Point(116.403694,39.927552);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom();
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    var customLayer;
    function addCustomLayer(keyword) {
        if (customLayer) {
            map.removeTileLayer(customLayer);
        }
        customLayer=new BMap.CustomLayer({
            geotableId: 30960,
            q: '', //检索关键字
            tags: '', //空格分隔的多字符串
            filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby
        });
        map.addTileLayer(customLayer);
        customLayer.addEventListener('hotspotclick',callback);
    }
    function callback(e)//单击热点图层
    {
            var customPoi = e.customPoi;//poi的默认字段
            var contentPoi=e.content;//poi的自定义字段
            var content = '<p style="width:280px;margin:0;line-height:20px;">地址：' + customPoi.address + '<br/>价格:'+contentPoi.dayprice+'元'+'</p>';
            var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                title: customPoi.title, //标题
                width: 290, //宽度
                height: 40, //高度
                panel : "panel", //检索结果面板
                enableAutoPan : true, //自动平移
                enableSendToPhone: true, //是否显示发送到手机按钮
                searchTypes :[
                    BMAPLIB_TAB_SEARCH,   //周边检索
                    BMAPLIB_TAB_TO_HERE,  //到这里去
                    BMAPLIB_TAB_FROM_HERE //从这里出发
                ]
            });
            var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
            searchInfoWindow.open(point);
    }
    document.getElementById("open").onclick = function(){
        addCustomLayer();
    };
    document.getElementById("open").click();
    document.getElementById("close").onclick = function(){
        if (customLayer) {
            map.removeTileLayer(customLayer);
        }
    };
    // 创建CityList对象，并放在citylist_container节点内
    var myCl = new BMapLib.CityList({container : "citylist_container", map : map});

    // 给城市点击时，添加相关操作
    myCl.addEventListener("cityclick", function(e) {
        // 修改当前城市显示
        document.getElementById("curCity").innerHTML = e.name;

        // 点击后隐藏城市列表
        document.getElementById("cityList").style.display = "none";
    });
    // 给“更换城市”链接添加点击操作
    document.getElementById("curCityText").onclick = function() {
        var cl = document.getElementById("cityList");
        if (cl.style.display == "none") {
            cl.style.display = "";
        } else {
            cl.style.display = "none";
        }   
    };
    // 给城市列表上的关闭按钮添加点击操作
    document.getElementById("popup_close").onclick = function() {
        var cl = document.getElementById("cityList");
        if (cl.style.display == "none") {
            cl.style.display = "";
        } else {
            cl.style.display = "none";
        }   
    };
</script>

需要修改：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A4749739227af1618f7b0d1b588c0e85"></script>//更换自己的秘钥

var point = new BMap.Point(116.403694,39.927552);  // 修改成你的初始点坐标

geotableId: 30960, // 数据表的id

最后将代保存成html文件，本地打开或者上传到网页空间，能获得自己创建的麻点图，实现快速静态位置信息可视化。

api001

5.后记

还是那句，在一些队伍内展示的场合，或者只是团队内构建道路信息的工具，就可以用在线地图api实现可视化。开发产品当然另当别论，需要深入研究前端，实现交互、实时更新等等。