作为一个LBS的APP，都获得了用户经纬度，也都使用了友盟统计、google ana等等统计分析系统，不过没有地图展示功能，不能进行直观的展示。
友盟统计、google ana等系统是总体数据统计，无法和业务结合起来，比如淘宝提供每个店、每个商品的用户统计。
当有上述需求时，就需要自己服务器保存一份经纬度，进行统计，这时候如何直观的展示？
查看各个地图开放平台的文档，发现有的提供了&麻点图/点聚合（Marker Cluster）&功能。
原理是：把每个点都画在地图上，缩放时累加聚合。
缺点：只能画少量的点（1千个），如果很多的话会导致浏览器卡死。如果需要把几百万用户画在地图上，麻点图显然不能用。
高德地图：
点聚合显示：
叠加云数据图层：
谷歌地图：
MarkerClusterer：
如上图所示：麻点图解决的是 从1加到1000的问题。
能不能直接从1千、1万开始呢？麻点图不可以，所以我开发了麻数图（Number Cluster），现在整理开源出来，方便重用，希望能帮大家节约一点时间。
在线演示（国内，高德和腾讯）：
在线演示（国外，Google，需番茄）：
如何集成到自己的项目：请看examples目录。
阅读(...) 评论()
本站原创作品采用进行许可。& & & 上篇博文介绍了几个比较实用的百度地图特效，其中重点介绍了海量数据上传及响应的问题，前端展示可以通过LBS云麻点来展示，通过这个可以解决批量数据Marker响应特慢的性能问题。首先在百度云服务器上建完表之后，我们可以通过后台的管理平台直接把数据传上去，作为我们的初始数据。这部分数据有了之后，接下来要做的就是想办法手动同步数据，更智能一点就是实时同步数据，接下来就带你一步步实现这个过程。
& & & 这次在正文开始之前，我想先做一次吐槽君。最近压力有点儿大，先来发一下牢骚。三人行，则必有我师。无论你职位的高低，工作没有贵贱，当你是新手的时候，你应该要放低姿态，当你是老手的时候，更要放低姿态，因为成熟的麦子都是低着头的。。。上帝为你开了一扇门，就肯定会为你关一扇窗，无论什么时候，都不要觉得你比别人优越多少。当工作中你发现别人犯了错时，你没有义务去纠正别人，帮助别人改正，但是退一万步，你至少不应该冷嘲热讽吧。本是同根生，相煎何太急？程序员又何必为难程序员呢？你可能比别人多了两年的经验，可能比别人多写了些代码，可是你能保证各方面都比别人优秀吗？如果你是老手，多帮帮别人，你漫不经心的一句话可能让别人脱离了迷惘；如果你是新手，努力学习，不要永远做新手！最后，能在一起工作都是缘分，且行且珍惜！
& & & 首先，说说这次同步过程中发现的几个问题及解决方案。1、百度云麻点样式无法自定义，只能使用官方的一些坐标点的样式；2、虽然官方给出的数据是一天请求10万次，但是如果请求频繁的话，会返回错误的数据；3、百度云检索最多只能返回2000条数据，如果需要返回更多数据，可以通过云存储里的查询指定条件的数据列表接口来实现；4、云服务器数据会有缓存，有时候更新不及时；5、上传数据的csv格式里有一列是空的，不知道是干什么用的。 & & &
& & & 接下来开始今天的正文，数据同步这块儿，这里经历了文章开头说到的两个过程，由手动同步升级成自动同步。刚开始做的是傻瓜似的，在页面上放了一个按钮，在按钮点击的时候向handler发送请求，然后去获取本地数据，然后更新到百度云服务器。下图是上传数据需要的接口：
& & &通过API接口可以看到，发送的请求参数也比较少，三个必须参数，一个表ID geotable_id，一个csv文件，即需要上传的数据，另外一个是访问权限ak。到这里我们大致的思路就出来了，首先生成csv格式的数据文件，然后获取配置的ak和geotable_id，然后封装参数，接着发送Post请求。下面我们来一步一步实现这个过程：
& & & 首先生成csv格式的数据文件。这里发生的场景是这样的：当我们最初在百度云服务器建表的时候，表建完之后我们会把最初的数据通过API控制台的数据管理后台把数据批量上传上去，然后本地数据会不断更新，当我们点击页面同步数据按钮的时候，最重要的一个判断就是&&需要同步哪些数据。这里可以有两种方案，第一，通过配置表的参数来存本地更新之前最大的一条记录的主键，然后同步的时候去找比这条数据主键更大的数据；第二，直接向百度服务器获取数据，因为百度云存储那边可以对查询出来的数据进行倒叙排序，所以我们只需要按排序字段进行倒叙排列，然后取top1条记录，这样也可以得到最大记录的主键。得到这个主键之后，接下来做的操作就简单了，每次点击同步的时候，对比服务器上存的最大记录主键跟本地数据库当前最大记录主键的大小，如果服务器上的数据比本地小，则有数据需要同步，反之则不。关键代码：
& & & 以下是同步数据的关键代码：
#region 同步数据
/// &summary&
/// 同步数据
/// &/summary&
/// ¶m name="context"&&/param&
private void HttpToSyncBaiduData(HttpContext context)
string posturl = "http://api./geodata/v3/poi/upload";
Users userBll = new Users();
int userId = Globals.SafeInt(context.Request.Form["userId"], -1);
if (userId & 0)//当前云存储中最大的UserId
DataSet ds = userBll.GetUserData(userId);
if (!DataSetTools.DataSetIsNull(ds))
string originalName = ExportDataGridToCSV(ds.Tables[0]);
NameValueCollection nvc = new NameValueCollection();
nvc.Add("geotable_id", geotable_id.ToString());
nvc.Add("ak", ak);
string contents = HttpUploadFile(posturl, originalName, "poi_list", "application/vnd.ms-excel", nvc);
FileManage.DeleteFile(originalName); //删除原文件
JsonObject jsonObject = JsonConvert.Import&JsonObject&(contents);
context.Response.Write(jsonObject);
JsonObject jsonObject = new JsonObject();
jsonObject.Put("status", "-1");
context.Response.Write(jsonObject);
#endregion
& & &这里涉及了两个方法，一个是将DataTable转成CSV文件，一个是发送Post请求，以下是代码：&&
#region DataGrid转CSV文件
/// &summary&
/// Export the data from datatable to CSV file
/// &/summary&
/// ¶m name="grid"&DataGrid&/param&
public string ExportDataGridToCSV(DataTable dt)
string path = null;
string strFile = "syncUserData" + DateTime.Now.ToString("yyyyMMddhhmmss") + ".csv";
path = HttpContext.Current.Server.MapPath(strFile);
using (System.IO.FileStream fs = new FileStream(path, System.IO.FileMode.Create, System.IO.FileAccess.Write))
using (StreamWriter sw = new StreamWriter(fs, new System.Text.UTF8Encoding()))
for (int i = 0; i & dt.Columns.Count - 1; i++)
sw.Write(dt.Columns[i].ColumnName);
sw.Write(",");
sw.Write(dt.Columns[dt.Columns.Count - 1].ColumnName);
sw.WriteLine("");
for (int i = 0; i & dt.Rows.C i++)
for (int j = 0; j & dt.Columns.Count - 1; j++)
sw.Write(DelQuota(dt.Rows[i][j].ToString()));
sw.Write(",");
sw.Write(DelQuota(dt.Rows[i][dt.Columns.Count - 1].ToString()));
sw.WriteLine("");
sw.Flush();
#endregion
#region 过滤特殊字符
/// &summary&
/// Delete special symbol
/// &/summary&
/// ¶m name="str"&需要过滤的字符串&/param&
/// &returns&&/returns&
public string DelQuota(string str)
string result =
string[] strQuota = { "~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "`", ";", "'", ",", "/", ":", "/,", "&", "&", "?", "|" };
foreach (string item in strQuota)
if (result.Contains(item))
result = result.Replace(item, "");
#endregion
& & &以下是直接发送Post请求的代码，之前在网上找了很多C#发送Post请求的，用的时候都是各种问题，后来才找到下边这个，确实是可以用：
#region Post方式提交请求
/// &summary&
/// Post方式提交请求
/// &/summary&
/// ¶m name="url"&请求地址&/param&
/// ¶m name="file"&文件&/param&
/// ¶m name="paramName"&参数名称&/param&
/// ¶m name="contentType"&类型&/param&
/// ¶m name="nvc"&参数集合&/param&
/// &returns&&/returns&
public string HttpUploadFile(string url, string file, string paramName, string contentType, NameValueCollection nvc)
string result = string.E
string boundary = "---------------------------" + DateTime.Now.Ticks.ToString("x");
byte[] boundarybytes = System.Text.Encoding.ASCII.GetBytes("\r\n--" + boundary + "\r\n");
HttpWebRequest wr = (HttpWebRequest)WebRequest.Create(url);
wr.ContentType = "multipart/form- boundary=" +
wr.Method = "POST";
wr.KeepAlive = true;
wr.Credentials = System.Net.CredentialCache.DefaultC
Stream rs = wr.GetRequestStream();
string formdataTemplate = "Content-Disposition: form- name=\"{0}\"\r\n\r\n{1}";
foreach (string key in nvc.Keys)
rs.Write(boundarybytes, 0, boundarybytes.Length);
string formitem = string.Format(formdataTemplate, key, nvc[key]);
byte[] formitembytes = System.Text.Encoding.UTF8.GetBytes(formitem);
rs.Write(formitembytes, 0, formitembytes.Length);
rs.Write(boundarybytes, 0, boundarybytes.Length);
string headerTemplate = "Content-Disposition: form- name=\"{0}\"; filename=\"{1}\"\r\nContent-Type: {2}\r\n\r\n";
string header = string.Format(headerTemplate, paramName, file, contentType);
byte[] headerbytes = System.Text.Encoding.UTF8.GetBytes(header);
rs.Write(headerbytes, 0, headerbytes.Length);
FileStream fileStream = new FileStream(file, FileMode.Open, FileAccess.Read);
byte[] buffer = new byte[];
int bytesRead = 0;
while ((bytesRead = fileStream.Read(buffer, 0, buffer.Length)) != 0)
rs.Write(buffer, 0, bytesRead);
fileStream.Close();
byte[] trailer = System.Text.Encoding.ASCII.GetBytes("\r\n--" + boundary + "--\r\n");
rs.Write(trailer, 0, trailer.Length);
rs.Close();
WebResponse wresp = null;
wresp = wr.GetResponse();
Stream stream2 = wresp.GetResponseStream();
StreamReader reader2 = new StreamReader(stream2);
result = reader2.ReadToEnd();
catch (Exception ex)
if (wresp != null)
wresp.Close();
wresp = null;
wr = null;
#endregion
& & &这里有点奇怪啊，开始我是通过PostMan直接操作的，抓取了提交的参数等信息，然后在后台去拼这个请求，跟PostMan提交的参数完全一致，可是百度返回的提示却一直都是少参数，无奈之下只能放弃最初自己写的，采用了上边的那种方式，不过好在最终目的还是实现了。
& & &手动同步用了一段时间之后，就发现问题了，每当需要同步数据的时候，都得点一下，这样领导就不高兴了。莫非我要叫个人实时去点这个按钮么？好吧，我做个自动同步的工具。这里说的自动同步工具，其实就是隔一段时间就自己去同步一下数据，隔一段时间去同步一下数据。这里最初也想了两个方案，一个就是做一个页面，隔一段时间向后台发请求，检查是否有可更新的数据，如果有可以更新的数据，就调一下上边的方法。这样做的优势是改动量最小，只需要加一个页面然后写个定时器就搞定了，可是缺点就是如果有多个人同时打开这个页面，数据就会混乱。另一个方案就是建一个Windows服务，定期去跑这个同步数据的代码。这样做的优势是不依赖于IIS，稳定。最终执行的方案也是后者，通过构建windows服务来做这个事情。
& & &构建Windows服务这里就不赘述了，网上有很多示例，基本上都是一搜一大把。在服务里，我们每隔5分钟去跑一次自动同步的代码，这样就实现了数据自动同步功能。关于百度LBS数据同步这块儿到此结束。这两天正在做一个新用户注册特效和用户下单特效。大致需求就是在以下这个云麻点地图上，一旦有新用户注册，以动态图片显示出他的坐标位置信息，用户下单也是一样，每个用户都是一个云麻点，一旦某个用户下单成功，展示一个烟花绽放的特效。基本功能都做得差不多了，哪天有时间再更新上来！
阅读(...) 评论()摘要：覆盖物，是一张地图的灵魂。有覆盖物的地图，才是完整的地图。在一张地图上，除了底层的底图（瓦片图，矢量图），控件（有功能可操作的工具），最重要最不可缺少的就是覆盖物了。覆盖物有多种，包括，标注、折线、多边形、信息窗口、聚合marker、麻点图和图片覆盖物。本文会详细介绍每一种覆盖物的概念，添加方法，修改方法，移除方法等。最后会提供示例和源代码下载。
示例demo：
-------------------------------------------------------------------------------------------------
一、标注marker
最常见的覆盖物就是标注（marker），用它可以标示出店铺的位置，你所在的位置，连锁店的分布图等，可以把标注简单理解为1个点。
在地图上增加一个标注，又称之为在地图上&打点&。打点工具在上一章《控件》中已经详细讲解，控件：&。
温馨有爱的小贴士：
标注marker的图片可以是gif图，让marker&动&起来。
1、添加标注&&&可爱的赵灵儿&
icon是标注的图片地址，想用什么图片，就把图片地址放在这里。
position是标注的位置，经纬度。
//实例化marker
function addMarker(){
marker=new AMap.Marker({
icon:"zhao.gif",
position:new AMap.LngLat(116..907761)
marker.setMap(mapObj);
//在地图上添加点
2、修改标注&&&一秒钟变拓跋玉儿&
setContent是用于改变文字说明，支持html5；
setPosition是用于改变标注的位置。
marker.setContent(markerContent);//更新点标记内容
marker.setPosition(new AMap.LngLat(116..927761)); //更新点标记位置
3、清除覆盖物
对于制定marker，可以单独清除每一个覆盖物：
marker.setMap(null);
清除地图上全部覆盖物，用：
mapObj.clearMap();
示例demo：
二、聚合marker
1、增加一个marker
温馨小贴士：
不如icon的值为空，就会调用高德默认的marker哟，也蛮漂亮的。
function addMarker2(){
marker2 = new AMap.Marker({
position:(new AMap.LngLat(116..916451)),
draggable:true, //点标记可拖拽
cursor:'move'
//鼠标悬停点标记时的鼠标样式
marker2.setMap(mapObj);
2、给marker加上动画
function marker2Cartoon(){
marker2.setAnimation('AMAP_ANIMATION_BOUNCE'); //设置点标记的动画效果，此处为弹跳效果
拖拽动画需要在marker里面设置。
function addMarker2(){
marker2 = new AMap.Marker({
position:(new AMap.LngLat(116..916451)),
draggable:true,
//点标记可拖拽
cursor:'move',
raiseOnDrag:true //鼠标拖拽点标记时开启点标记离开地图的效果
marker2.setMap(mapObj);
3、聚合marker
增加一群marker，就是聚合marker
&温馨小贴士：为什么要使用聚合marker？
当marker大于500的时候，满屏幕都是密密麻麻的marker了，显得杂乱无章。
而且由于浏览器性能的关系，特别是IE6浏览器，会造成浏览器卡死的情况。
这个时候，使用麻点图或者聚合marker就可以轻松解决marker数量太多的问题。
增加一群marker：
function iJuhe(){
mapObj.clearMap();
// 随机向地图添加500个标注点
var mapBounds = mapObj.getBounds();
var sw = mapBounds.getSouthWest();
var ne = mapBounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i & 500; i ++) {
var markerPosition = new AMap.LngLat(sw.lng + lngSpan * (Math.random() * 1),ne.lat - latSpan * (Math.random() * 1));
var marker = new AMap.Marker({
map:mapObj,
position:markerPosition, //基点位置
icon:"js_marker.png", //marker图标，直接传递地址url
offset:{x:-8,y:-34} //相对于基点的位置
markers.push(marker);
增加marker聚合的功能：
function addCluster(tag)
if(cluster) {
cluster.setMap(null);
if(tag==1) {
var sts=[{url:"js_1.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},
{url:"js_2.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},
{url:"js_3.png",size:new AMap.Size(48,48),offset:new AMap.Pixel(-24,-45), textColor:'#CC0066'}];
mapObj.plugin(["AMap.MarkerClusterer"],function(){
cluster = new AMap.MarkerClusterer(mapObj,markers,{styles:sts});
mapObj.plugin(["AMap.MarkerClusterer"],function(){
cluster = new AMap.MarkerClusterer(mapObj,markers);
缩小地图，marker会变得更加集中。
增加一个延时延时的功能，先添加500的marker，一秒钟后变成聚合marker。
setTimeout(function(){
addCluster(0); e
示例demo：
三、麻点图
高德云图是实时渲染的，在后台更改数据后，能在前台直观的看到数据展示。
免去了切图啊，制作瓦片图，对准经纬度等一系列的麻烦。
1、登录云图，轻松制作麻点图：
点击创建地图
2、导入数据
手工导入数据，可视化一站式操作，适合少量点：
自动导入数据，适合大批量数据：
温馨小贴士：
第一行必须是字段名，只能是字母、数字和下划线，并且不能以数字开头。
经纬度必须分开成2个字段！
文件只支持 .csv 格式、UTF-8编码，数据量不超过 10,000 条，文件大小不超过10M、字段总数不超过 40 个。
字段命名规则：以英文字母开头，仅由英文字母、数字、下划线组成，字段名长度不超过20位。
创建表格数据，可以打开一个记事本，编码改为UFT-8模式。然后导入数据。
数据格式举例：
tag,name,lng,lat,tel,content
免费停车场,免费停车场001,116..-,停过5次没贴条
免费停车场,免费停车场002,116..294832,停过1次没贴条
免费停车场,免费停车场003,116..-,停过2次没贴条
免费停车场,免费停车场004,116..-,停过7次没贴条
免费停车场,免费停车场005,116..-,停过20次没贴条&
数据导入后，就是这样子的。大家点击预览，就可以获取一个url了。
然后大家可以直接用iframe的形式，把标注好的地图放到自己的网站上。
云图实时渲染：
&iframe src="/share/MZVB3y"&&/iframe&
接下来，大家如果要使用云索引，云检索，使用这个教程：
三甲医院例子：
东莞酒店例子：
贪官罗马图：
示例demo：
四、折线，行车记录仪，轨迹回放
function addLine(){
var lineArr=new Array();//创建线覆盖物节点坐标数组
lineArr.push(new AMap.LngLat("116.368904","39.913423"));
lineArr.push(new AMap.LngLat("116.382122","39.901176"));
lineArr.push(new AMap.LngLat("116.387271","39.912501"));
lineArr.push(new AMap.LngLat("116.398258","39.904600"));
polyline=new AMap.Polyline({
path:lineArr, //设置线覆盖物路径
strokeColor:"#3366FF", //线颜色
strokeOpacity:1, //线透明度
strokeWeight:5, //线宽
strokeStyle:"solid", //线样式
strokeDasharray:[10,5] //补充线样式
polyline.setMap(mapObj);
2、让轨迹动起来
marker3.moveAlong(lineArr,80);
//开始轨迹回放
3、让轨迹暂停
marker3.stopMove();
//暂停轨迹回放
示例demo：
五、圆形，多边形
//添加圆覆盖物
function addCircle() {
circle = new AMap.Circle({
center:new AMap.LngLat("116.403322","39.920255"),// 圆心位置
radius:10000, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35//填充透明度
circle.setMap(mapObj);
//添加多边形覆盖物
function addPolygon(){
var polygonArr=new Array();//多边形覆盖物节点坐标数组
polygonArr.push(new AMap.LngLat("116.319809","39.956596"));
polygonArr.push(new AMap.LngLat("116.556702","39.983434"));
polygonArr.push(new AMap.LngLat("116.483917","39.845449"));
polygonArr.push(new AMap.LngLat("116.244278","39.848612"));
polygon=new AMap.Polygon({
path:polygonArr,//设置多边形边界路径
strokeColor:"#0000ff", //线颜色
strokeOpacity:0.2, //线透明度
strokeWeight:3,
fillColor: "#f5deb3", //填充色
fillOpacity: 0.35//填充透明度
polygon.setMap(mapObj);
示例demo：
六、信息窗口
1、默认信息窗口
//在指定位置打开默认信息窗体
function openInfo(){
//构建信息窗体中显示的内容
var info = [];
info.push("&div&&div&&img style=\"float:\" src=\" /images/autonavi.png \"/&&/div& ");
info.push("&div style=\"padding:0px 0px 0px 4\"&&b&高德软件&/b&");
info.push("电话 : 010-
邮编 : 100102");
info.push("地址 : 北京市望京阜通东大街方恒国际中心A座16层&/div&&/div&");
inforWindow = new Window({
content:info.join("&br/&")
//使用默认信息窗体框样式，显示信息内容
inforWindow.open(mapObj,new AMap.LngLat(116..907409));
2、自定义信息窗口
//实例化信息窗体
var infoWindow2 = new Window({
isCustom:true,
//使用自定义窗体
content:createInfoWindow('方恒假日酒店&&&span style="font-size:11color:#F00;"&价格:318&/span&',"&img src='/simgad/7749134' style='float:margin:0 5px 5px 0;'&地址：北京市朝阳区阜通东大街6号院3号楼 东北 8.3 公里&br/&电话：010 &br/&&a href='/view/6748574.htm'&详细信息&/a&"),
size:new AMap.Size(300, 0),
offset:new AMap.Pixel(0, -50)//-113, -140
//关闭信息窗体
function closeInfoWindow(){
mapObj.clearInfoWindow();
//构建自定义信息窗体
function createInfoWindow(title,content){
var info = document.createElement("div");
info.className = "info";
// 定义顶部标题
var top = document.createElement("div");
top.className = "info-top";
var titleD = document.createElement("div");
titleD.innerHTML =
var closeX = document.createElement("img");
closeX.src = "close2.gif";
closeX.onclick = closeInfoW
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.innerHTML =
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
var sharp = document.createElement("img");
sharp.src = "sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
function myWindow(){
infoWindow2.open(mapObj,new AMap.LngLat(116..907409));
自定义信息窗口，需要CSS样式支持
/* 定义自定义信息窗体样式 */
{position: relative;z-index: 100;border: 1px solid #BCBCBC;box-shadow: 0 0 10px;#B7B6B6;border-radius: 8px;background-color: rgba(255,255,255,0.9);transition-duration: 0.25s;}
:hover {box-shadow: 0px 0px 15px #0CF;}
-top {position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius:5px 5px 0 0;}
-top div {display: inline-block;color: #333333;font-size:14px;font-weight:bold;
line-height:31px;padding:<span style="color: #px;}
-top img {position: absolute;top: 10px;right: 10px;transition-duration: 0.25s;}
-top img:hover{box-shadow: 0px 0px 5px #000;}
-middle {font-size:12px;padding:10px;line-height:21px;}
-bottom {height:0px;width:<span style="color: #%;clear:both;text-align:center;}
-bottom img{position: relative;z-index:<span style="color: #;}
示例demo：
七、厦门鼓浪屿地图
大家可以使用图片覆盖物，实现各种园区图，厂区图，校园图，手绘风格地图等。
在网上找好手绘地图，我找到的是鼓浪屿手绘地图。把它扣空，做成png-24的透明图片。
然后确定图片的左下角和右上角。把图片贴上去。效果不错。
function xmMap(){
mapObj.setZoom(15);
var bounds = new AMap.Bounds(new AMap.LngLat(118..435624), new AMap.LngLat(118..454299)),
groundImageOpts = {
opacity: 1,
//图片透明度
clickable: true,//图片相应鼠标点击事件，默认：false
map: mapObj
//图片叠加的地图对象
//实例化一个图片覆盖物对象
var groundImage = new AMap.GroundImage('gly.png', bounds, groundImageOpts);
mapObj.setCenter(new AMap.LngLat(118..443946));
&示例demo：
八、源代码与示例
示例demo：
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&地图覆盖物&/title&
&link rel="stylesheet" type="text/css" href="zero.css" /&
&script language="javascript" src="/maps?v=1.2&key=23e8cfe2d8f3ce1e4af445"&&/script&
&body onLoad="mapInit()"&
&div id="iCenter"&&/div&
&div id="iControlbox"&
&p&坐标：&span id="lnglat"&&&/span&&/p&
&li&&button onclick="javascript:addMarker();"&添加marker&/button&&button onclick="javascript:updateMarker();"&修改marker&/button&&button onclick="javascript:clearMap();"&清空地图&/button&&/li&
&li&&button onclick="javascript:addMarker2();"&普通标注&/button&&button onclick="javascript:marker2Cartoon();"&动画&/button&&button onclick="javascript:iJuhe();"&聚合marker&/button&&button onclick="javascript:clearMap();"&清空地图&/button&&/li&
&li&&button onclick="javascript:addCloudLayer();"&添加云图&/button&&button onclick="javascript:clearMap();"&清空地图&/button&&/li&
&li&&button onclick="javascript:startRun();"&轨迹回放&/button&&button onclick="javascript:endRun();"&停止&/button&&button onclick="javascript:clearMap();"&清空地图&/button&&/li&
&li&&button onclick="javascript:addCircle();"&圆形&/button&&button onclick="javascript:addPolygon();"&多边形&/button&&button onclick="javascript:clearMap();"&清空地图&/button&&/li&
&li&&button onclick="javascript:openInfo();"&默认信息窗口&/button&&button onclick="javascript:myWindow();"&自定义信息窗口&/button&&button onclick="javascript:clearMap();"&清空地图&/button&&/li&
&li&&button onclick="javascript:xmMap();"&鼓浪屿地图&/button&&button onclick="javascript:clearMap();"&清空地图&/button&&/li&
&!-- tongji begin--&
&script type="text/javascript"&
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "/h.js%3Faeff88fafcea3bd' type='text/javascript'%3E%3C/script%3E"));
&!-- tongji end --&
&script language="javascript"&
var marker2;
var marker3;
var markers = [];
var cloudDataL
//初始化地图对象，加载地图
function mapInit(){
mapObj = new AMap.Map("iCenter",{
center:new AMap.LngLat(116.397428,39.90923), //地图中心点
//地图显示的比例尺级别
//zoomEnable:false
AMap.event.addListener(mapObj,'click',getLnglat); //点击事件
//鼠标点击，获取经纬度坐标
function getLnglat(e){
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
document.getElementById("lnglat").innerHTML = x + "," +
//清空地图
function clearMap(){
mapObj.clearMap();
cloudDataLayer.setMap(null);
//实例化marker
function addMarker(){
mapObj.clearMap();
marker=new AMap.Marker({
icon:"zhao.gif",
position:new AMap.LngLat(116.405467,39.907761)
marker.setMap(mapObj);
//在地图上添加点
//修改marker
function updateMarker()
//自定义点标记内容
var markerContent = document.createElement("div");
markerContent.className = "markerContentStyle";
//点标记中的图标
var markerImg= document.createElement("img");
markerImg.className="markerlnglat";
markerImg.src="tuo.gif";
markerContent.appendChild(markerImg);
//点标记中的文本
var markerSpan = document.createElement("span");
markerSpan.innerHTML = "一秒钟变拓跋玉儿";
markerContent.appendChild(markerSpan);
marker.setContent(markerContent);//更新点标记内容
marker.setPosition(new AMap.LngLat(116.368732,39.92514)); //更新点标记位置
function addMarker2(){
mapObj.clearMap();
marker2 = new AMap.Marker({
position:(new AMap.LngLat(116.384182,39.916451)),
draggable:true,
//点标记可拖拽
cursor:'move',
raiseOnDrag:true //鼠标拖拽点标记时开启点标记离开地图的效果
marker2.setMap(mapObj);
function marker2Cartoon(){
marker2.setAnimation('AMAP_ANIMATION_BOUNCE'); //设置点标记的动画效果，此处为弹跳效果
function iJuhe(){
mapObj.clearMap();
// 随机向地图添加500个标注点
var mapBounds = mapObj.getBounds();
var sw = mapBounds.getSouthWest();
var ne = mapBounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i & 500; i ++) {
var markerPosition = new AMap.LngLat(sw.lng + lngSpan * (Math.random() * 1),ne.lat - latSpan * (Math.random() * 1));
var marker = new AMap.Marker({
map:mapObj,
position:markerPosition, //基点位置
icon:"js_marker.png", //marker图标，直接传递地址url
offset:{x:-8,y:-34} //相对于基点的位置
markers.push(marker);
setTimeout(function(){
addCluster(0); e
function addCluster(tag)
if(cluster) {
cluster.setMap(null);
if(tag==1) {
var sts=[{url:"js_1.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},
{url:"js_2.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},
{url:"js_3.png",size:new AMap.Size(48,48),offset:new AMap.Pixel(-24,-45), textColor:'#CC0066'}];
mapObj.plugin(["AMap.MarkerClusterer"],function(){
cluster = new AMap.MarkerClusterer(mapObj,markers,{styles:sts});
mapObj.plugin(["AMap.MarkerClusterer"],function(){
cluster = new AMap.MarkerClusterer(mapObj,markers);
//添加云图
function addCloudLayer() {
//加载云图层插件
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: ''},
clickable:true
cloudDataLayer = new AMap.CloudDataLayer('533904fbe4b08ebff7d53895', layerOptions); //实例化云图层类
cloudDataLayer.setMap(mapObj); //叠加云图层到地图
AMap.event.addListener(cloudDataLayer, 'click', function (result) {
var clouddata = result.
var infoWindow = new Window({
content:"&h3&&font face=\"微软雅黑\"color=\"#3366FF\"&"+ clouddata._name +"&/font&&/h3&&hr /&地址："+ clouddata._address + "&br /&" + "电话号码：" + clouddata.phonenumber+ "&br /&" + "邮编：" + clouddata.postalcode+"&br /&&strong&" + "擅长专科：" +clouddata.medicalspecialists+
"&/strong&&br /&" + "所在省份：" +clouddata.provinces ,
size:new AMap.Size(300, 0),
autoMove:true,
offset:new AMap.Pixel(0,-5)
infoWindow.open(mapObj, clouddata._location);
function removeCloudLayer(){
cloudDataLayer.setMap(null);
//地图图块加载完毕后执行函数
function completeEventHandler(){
marker3 = new AMap.Marker({
map:mapObj,
//draggable:true, //是否可拖动
position:new AMap.LngLat(116.273881,39.807409),//基点位置
icon:"/images/car_03.png", //marker图标，直接传递地址url
offset:new AMap.Pixel(-26,-13), //相对于基点的位置
autoRotation:true
var lngX = 116.273881;
var latY = 39.807409;
lineArr = new Array();
lineArr.push(new AMap.LngLat(lngX,latY));
for (var i = 1; i &30; i++){
lngX = lngX+Math.random()*0.05;
latY = latY+Math.random()*0.0001;
latY = latY+Math.random()*0.06;
lineArr.push(new AMap.LngLat(lngX,latY));
//绘制轨迹
var polyline = new AMap.Polyline({
map:mapObj,
path:lineArr,
strokeColor:"#00A",//线颜色
strokeOpacity:1,//线透明度
strokeWeight:3,//线宽
strokeStyle:"solid",//线样式
function startRun(){
//开始播放动画
completeEventHandler();
marker3.moveAlong(lineArr,80);
//开始轨迹回放
function endRun(){
//结束动画播放
marker3.stopMove();
//暂停轨迹回放
//添加圆覆盖物
function addCircle() {
circle = new AMap.Circle({
center:new AMap.LngLat("116.403322","39.920255"),// 圆心位置
radius:10000, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35//填充透明度
circle.setMap(mapObj);
//添加多边形覆盖物
function addPolygon(){
var polygonArr=new Array();//多边形覆盖物节点坐标数组
polygonArr.push(new AMap.LngLat("116.319809","39.956596"));
polygonArr.push(new AMap.LngLat("116.556702","39.983434"));
polygonArr.push(new AMap.LngLat("116.483917","39.845449"));
polygonArr.push(new AMap.LngLat("116.244278","39.848612"));
polygon=new AMap.Polygon({
path:polygonArr,//设置多边形边界路径
strokeColor:"#0000ff", //线颜色
strokeOpacity:0.2, //线透明度
strokeWeight:3,
fillColor: "#f5deb3", //填充色
fillOpacity: 0.35//填充透明度
polygon.setMap(mapObj);
//在指定位置打开默认信息窗体
function openInfo(){
//构建信息窗体中显示的内容
var info = [];
info.push("&div&&div&&img style=\"float:\" src=\" /images/autonavi.png \"/&&/div& ");
info.push("&div style=\"padding:0px 0px 0px 4\"&&b&高德软件&/b&");
info.push("电话 : 010-
邮编 : 100102");
info.push("地址 : 北京市望京阜通东大街方恒国际中心A座16层&/div&&/div&");
inforWindow = new Window({
content:info.join("&br/&")
//使用默认信息窗体框样式，显示信息内容
inforWindow.open(mapObj,new AMap.LngLat(116.373881,39.907409));
//实例化信息窗体
var infoWindow2 = new Window({
isCustom:true,
//使用自定义窗体
content:createInfoWindow('方恒假日酒店&&&span style="font-size:11color:#F00;"&价格:318&/span&',"&img src='/simgad/7749134' style='float:margin:0 5px 5px 0;'&地址：北京市朝阳区阜通东大街6号院3号楼 东北 8.3 公里&br/&电话：010 &br/&&a href='/view/6748574.htm'&详细信息&/a&"),
size:new AMap.Size(300, 0),
offset:new AMap.Pixel(0, -50)//-113, -140
//关闭信息窗体
function closeInfoWindow(){
mapObj.clearInfoWindow();
//构建自定义信息窗体
function createInfoWindow(title,content){
var info = document.createElement("div");
info.className = "info";
// 定义顶部标题
var top = document.createElement("div");
top.className = "info-top";
var titleD = document.createElement("div");
titleD.innerHTML =
var closeX = document.createElement("img");
closeX.src = "close2.gif";
closeX.onclick = closeInfoW
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.innerHTML =
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
var sharp = document.createElement("img");
sharp.src = "sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
function myWindow(){
infoWindow2.open(mapObj,new AMap.LngLat(116.373881,39.907409));
function xmMap(){
mapObj.setZoom(15);
var bounds = new AMap.Bounds(new AMap.LngLat(118.055005,24.435624), new AMap.LngLat(118.078351,24.454299)),
groundImageOpts = {
opacity: 1,
//图片透明度
clickable: true,//图片相应鼠标点击事件，默认：false
map: mapObj
//图片叠加的地图对象
//实例化一个图片覆盖物对象
var groundImage = new AMap.GroundImage('gly.png', bounds, groundImageOpts);
setTimeout(function(){
mapObj.setCenter(new AMap.LngLat(118.067665,24.443946));
//mapObj.setCenter(new AMap.LngLat(118..443946));
阅读(...) 评论()
