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

2016-10-29 1 Comments 3,959 Views 0 Times

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

api001

0.概述
1.开发者账户相关
2.开发手册、demo
5.后记

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
        });

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

<!DOCTYPE html>

<html>

<head>

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>

<title>叠加麻点图层</title>

</head>

<body>

</div>

</div>

</body>

</html>

// 百度地图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>//更换自己的秘钥

1	<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);  // 修改成你的初始点坐标

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

geotableId: 30960, // 数据表的id

1	geotableId: 30960, // 数据表的id

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

api001

5.后记

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

Steins;Lab

Steins;Lab

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

Contents

0.概述

1.开发者账户相关

2.开发手册、demo

3.坐标信息管理

4.api使用

5.后记

相关