百度地图API开发:大量坐标点进行分组聚合

leaflet具有markersCluster(标点聚合)的插件非常好用,偶然看到百度地图也有标点聚合开源库,尝试一下,先上效果图:

点此打开交互网页

总结:

1、优点:

百度地图原生的火星坐标系和国内经过偏移的经纬度能完美歪在一起;

网络访问速度比open street map快;

地图信息相对丰富;

2,缺点:

说明文档不是很详细,自定义分组颜色应该有,没找到说明文档;

程序性能不高,点击聚合点会冻结1秒钟的感觉;

美感一般;

实现代码如下:

var map = new BMap.Map("allmap");
	window.map = map;
	var point = new BMap.Point(121.48, 31.233);

	map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
	map.enableScrollWheelZoom();                            //启用滚轮放大缩小
	map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
	map.disable3DBuilding();
	map.centerAndZoom(point, 12); 

	map.setMapStyle({style:‘grayscale‘});

	var markers_kfc = [];
	var markers_mcd = [];
	queue()
    	.defer(d3.csv, ‘data/kfc_official.csv‘)
    	.defer(d3.csv, ‘data/mcd_official_geo.csv‘)
    	.await(function(error, kfc, mcd) {
    		kfc.forEach(function(d) {
                var pt = new BMap.Point(d.lng, d.lat);
                markers_kfc.push(new BMap.Marker(pt));
            });
    		mcd.forEach(function(d) {
                var pt = new BMap.Point(d.lng, d.lat);
                markers_mcd.push(new BMap.Marker(pt));
            });
            var markerClusterer_kfc = new BMapLib.MarkerClusterer(map, {markers:markers_kfc});
            var markerClusterer_mcd = new BMapLib.MarkerClusterer(map, {markers:markers_mcd});
    	});
时间: 2024-10-10 16:56:26

百度地图API开发:大量坐标点进行分组聚合的相关文章

基于MFC与第三方类CWebPage的百度地图API开发范例

在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地图坐标标注为范例讲解百度地图API开发 1.新建一个工厂MFC工程取名为GeoDemo 2.选择为基于对话框的工程 3.创建成功如下 4.简单调整页面布局 5.在界面插入一个浏览器控件 6.插入之后的效果 7.先运行一下看看 8.接下来我们写一个简单的html页面,代码大概如下 其中也包括一个jav

深入浅出百度地图API开发系列(1):前言

百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能给想使用百度地图API的开发者带来一点帮助的话,那就太好了,也希望大家能够互相交流,共同学习. 写在前面的话:如果各位真的想深入了解地图的JSAPI,首先一些基础的GIS概念必不可少,GIS就是地理信息系统,可能很多程序猿没听过,简单地说,GIS就是通过计算机软件技术将地理信息进行可视化管理,地图就

android 基于百度地图api开发定位以及获取详细地址

一:百度地图开发必须要到百度开发平台android开发api下载相应的库,已经申请百度地图开发key. 二:新建项目baidumaplocation.设计main.xml文件这里注意的是MapView控件必须使用来自百度库封装好的com.baidu.mapapi.MapView .设计代码如下: Xml代码   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&q

在混合app开发过程中使用百度地图api的出现坐标偏差的解决

在项目中使用ngCordova的$cordovaGeolocation模块获取当前位置经纬度,当展示在百度地图中时发现有误差(我的测试误差为1.7公里左右),查资料发现百度地图经纬度与普通Gps获取的经纬度并不一样,解决办法参考百度开放地图论坛官方贴(http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=121352&extra=page%3D1). 我用的是官方给的第二种方式,代码参考如下: ionic框架,引入<scri

百度地图api抓取坐标实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>百度地图API的使用</title> <!-- 百度地图API--> <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></scri

百度地图API开发一——仿照现有测距实现测量面积功能

  最近做了一个百度地图API的开发项目,里面有测量距离和测量面积的功能需求.测量距离百度给出了封装好的javascript包--BMapLib.DistanceTool,效果如下: 这个效果体验很好:测量面积也给出了开源javascript包--BMapLib.DrawingManger,如下: 但这个效果和体验就很差了.客户希望测量面积能实现和测距一样的效果体验(鼠标在移动绘制过程中实时显示绘制面积,且样式效果要一样),经过一番折腾,修改了百度测距的javascript包,终于搞定.先上效果

百度地图api开发:根据坐标获得地理描述地址

// 创建地理编码实例              var myGeo = new BMap.Geocoder();              // 根据坐标得到地址描述            myGeo.getLocation(point, function(result){            var boundary = result.addressComponents.city+result.addressComponents.district;             getBound

HTML5 利用百度地图API获取当前位置

由于项目需要定位到城市,研究了地理定位,做了一些手记,和大家分享一下~ 项目的开发需求是获取到当前用户的位置,然后为用户提供一些服务. 此时可以采用两种定位方式,一种是用GPS的定位,然后将定位到的经纬度传递到百度地图的API接口当中.另一种方法是利用百度API接口,使用IP地址定位,然后使用IP地址获取到的经纬度,传递到百度地图API接口中. 自己尝试使用了这两种方式进行定位.相对来说,IP地址定位,偏差比较大.GPS定位虽然还可以,但是也不足够精确.产生比较大偏差的原因有可能是以下几点造成的

百度地图api的介绍和使用

1. 什么是百度地图api? 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,我们想使用百度地图的一些内部程序能够为我们提供很大的便利,他里面包括javascriptAPI,Web服务API.Android SDK.iOS SDK.定位SDK.车联网API.LBS云等多种开发工具与服务,提供基本地图展现.搜索.定位.逆/地理编码.路线规划.LBS云存储与检索等功能,适用于PC端.移动端.服务器等多种设备,多种操作系统下的地图应用开发.百度地图JavaScript API是一套由