使用百度地图API生成麻点图

最新推荐文章于 2024-04-19 10:31:16 发布

原创最新推荐文章于 2024-04-19 10:31:16 发布 · 9.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#api #javascript #地图 #百度地图

技术专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何使用百度地图API生成麻点图。首先，注册百度账号并获取appkey，然后通过JavaScript标注管理器处理地址数据。利用Python脚本调用百度地图API，将地址转换为经纬度信息，并生成JSON格式的数据。最后，将数据插入到HTML页面中，利用MarkerManager_min.js库创建标注，展示在地图上。尽管存在加载速度慢和无地名显示的问题，但这种方法能有效处理大量数据。

需求：给定一批地址，生成一张地图，上面有红点标注。
解决办法，总体思路是通过百度地图的API，免费高效：
1.注册一个百度帐号。登陆

http://lbsyun.baidu.com/apiconsole/key

创建一个应用，生成一个appkey
2.打开

http://developer.baidu.com/map/index.php?title=jspopular

找到云麻点图

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

实际上找到的是JavaScript 开源库中的标注管理器

http://developer.baidu.com/map/index.php?title=open/library

选择里面的标注管理器的例子，基于它作修改。

3.用python脚本处理地址，调用http接口，生成json格式的代码。
接口说明如下：

http://developer.baidu.com/map/index.php?title=webapi/guide/webservice-placeapi

主要代码如下：
position_list = []
for place in list:
encode_place = urllib.quote(place)
url = ‘http://api.map.baidu.com/place/v2/search?&q=’ + encode_place + “&region=” + encode_city + “&output=json&ak=” + ak
#print “place ” + place + ” encode ” + encode_place
#print “place ” + place + “url ” + url
url_ret = urllib.urlopen(url).read()
#print “place ” + place + ” ret ” + str(url_ret)
url_ret_json = json.loads(url_ret);
if url_ret_json['status'] == 0:
for position_info in url_ret_json['results']:
name = position_info['name']
if not position_info.has_key(‘location’):
continue
lat = position_info['location']['lat']
lng = position_info['location']['lng']
address = position_info['address']
coord_type = 1
#print (name.encode(‘utf8′) + “\t” + address.encode(‘utf8′) + “\t” + str(lng) + “\t” + str(lat) + “\t” + str(coord_type))
position = {
‘title’ : name,
‘address’ : address,
‘longitude’ : lng,
‘latitude’ : lat,
‘coord_type’ : coord_type
}
position_list.append(position)
print ‘{‘
print ‘\”title\”:\”‘ + name.encode(‘utf8′) + “\”,”
print ‘\”address\”:\”‘ + address.encode(‘utf8′) + “\”,”
print ‘\”longitude\”:’ + str(lng) + “,”
print ‘\”latitude\”:’ + str(lat) + “,”
print ‘\”coord_type\”:’ + str(lat)
print “},”
4.把生成的代码拷贝到position_list.js中
function get_position_list() {
var position_list = [
{
"title":"翡丽城",
"address":"城西西二环土门商圈核心团结中路（小树林旁）",
"longitude":108.889299,
"latitude":34.270751,
"coord_type":34.270751
},
...
]

5.在html中调用get_position_list，生成红点
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Hello, World</title>
<style type=”text/css”>
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<!–//此为v1.5版本的引用方式
// http://api.map.baidu.com/api?v=1.5&key=您的密钥&callback=initialize”; //此为v1.4版本及以前版本的引用方式
–>
</head>

<body>
<div id=”container”></div>
<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.5&ak=2lsXelcqIziwWiEN6rmWSFbN”></script>
<script type=”text/javascript” src=”http://api.map.baidu.com/library/MarkerManager/1.2/src/MarkerManager_min.js”>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script type=”text/javascript” src=”position_list.js”>
</script>
<script type=”text/javascript”>
//$(document).ready(function(){
var position_info_map = [

]
var map = new BMap.Map(“container”); // 创建地图实例
//var point = new BMap.Point(116.404, 39.915); // 创建点坐标
var point = new BMap.Point(108.789845, 34.319214); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
//map.setCurrentCity(“北京”); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
var point = new BMap.Point(108.793081, 34.318536);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中

var position_list = get_position_list();
for (var i = 0; i < position_list.length ; i++) {
var position_info = position_list[i];
var lng = position_info["longitude"];
var lat = position_info["latitude"];
var point = new BMap.Point(lng, lat);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
}
//});
</script>
</body>
</html>

需要注意的是，要引入MarkerManager_min.js，这个用来生成标注的js脚本
下载地址http://api.map.baidu.com/library/MarkerManager/1.2/src/MarkerManager_min.js
地图中心点随机从要画的地址中选择一个地址设置就可以。

把index.html和get_position.js拷贝到resin这个web server的webapps的baidu_map/目录下，直接访问http://localhost/baidu_map/index.html
就OK了。
这个过程的缺点有两个，一个是随着要绘制的点越来越多，这个例子中有1167个点要绘制，打开的速度会很慢，大约要一分钟。另一个缺点是鼠标点上去没有显示具体的地名，这个需要改进。
6.介绍另一种办法，方法在

http://jingyan.baidu.com/article/e4d08ffdd58e670fd2f60dd7.html?qq-pf-to=pcqq.c2c

中，应该更加高效。
但是我尝试了一下，生成了csv上传后，报服务器内部错误，生成失败，所以我选择自己生成原始数据，调用api绘制地图。