百度地图打标展示地点分布图 ,如何利用百度地图API进行标注

最新推荐文章于 2024-05-10 20:36:32 发布

知乎关注八戒来了

最新推荐文章于 2024-05-10 20:36:32 发布

阅读量1.1w

点赞数

分类专栏：百度地图开发文章标签：百度地图

本文链接：https://blog.csdn.net/wangyonglin1123/article/details/50410571

版权

百度地图开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

现在需求有一堆外卖客户坐标，需要显示到百度地图的中，并显示出，相同坐标有几个，及其地址。

比如：

效果图如上所示，下面我们开始：

第一步：创建jsp

我的是zuobiao.jsp

页面引入jquery即可文件：

源码如下：

<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>订单地图分布图</title>
<style type="text/css">
body { margin: 0; font-family: "Helvetica,Arial,FreeSans"; color: #000000; font-size: 12px; }
.demo_main { padding: 20px; padding-top: 10px; }
.demo_title { padding: 10px; margin-bottom: 10px; background-color: #D3D8E0; border: solid 1px gray; }
.demo_content { padding: 10px; margin-bottom: 10px; border: solid 1px gray; }
fieldset { border: 1px solid gray; }
</style>

<script charset="utf-8" src="<%=request.getContextPath()%>/scripts/jquery-1.9.1.js"></script>
<script charset="utf-8" src="<%=request.getContextPath()%>/scripts/mydate/WdatePicker.js"></script>
</head>
<body>
<%
String startTime1=(String)request.getAttribute("StartTime");
String endTime1=(String)request.getAttribute("EndTime");
String final1=(String)request.getAttribute("final");
%>
<div class="demo_main">
<fieldset class="demo_title">
<form action="${pageContext.request.contextPath}/order/AccountAction_goZuobiao.action">
开始日期: <input id="StartTime" name="StartTime" value="<%=startTime1%>" οnfοcus="WdatePicker({startDate:'%y-%M-%d'})" />
结束日期: <input id="EndTime" name="EndTime" value="<%=endTime1%>" οnfοcus="WdatePicker({startDate:'%y-%M-%d'})" />
<input type="submit"/>
</form>
</fieldset>
<fieldset class="demo_content">
<div style="min-height: 600px; width: 100%;" id="map">
</div>
<script type="text/javascript">
var markerArr = <%=final1%>;//通过后台传过来数据给他就行

var map; //Map实例
function map_init() {
map = new BMap.Map("map");
//第1步：设置地图中心点，望京
var point = new BMap.Point(116.486506,40.002798);
//第2步：初始化地图,设置中心点坐标和地图级别。
map.centerAndZoom(point, 13);
//第3步：启用滚轮放大缩小
map.enableScrollWheelZoom(true);
//第4步：向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//第5步：向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);

//第6步：向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);

//第7步：绘制点
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1];
var maker = addMarker(new window.BMap.Point(p0, p1), i);
addInfoWindow(maker, markerArr[i], i);
}
}

// 添加标注
function addMarker(point, index) {

var marker = new BMap.Marker(point);
map.addOverlay(marker);
return marker;
}

// 添加信息窗口
function addInfoWindow(marker, poi) {
//pop弹窗标题
var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
//pop弹窗信息
var html = [];
html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
html.push('<tr>');
html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');
html.push('</tr>');
html.push('</tbody></table>');
var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });

var openInfoWinFun = function () {
marker.openInfoWindow(infoWindow);
};
marker.addEventListener("click", openInfoWinFun);
return openInfoWinFun;
}

//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
window.onload = map_load;
</script>
</fieldset>
</div>
</body>
</html>

后台数据格式如下：
[{point:"116.488880,40.007684","title":"订单数:4个",address:"梅赛德斯-奔驰乘用车中国研发中心 (美团网)"},{point:"116.466928,39.996468","title":"订单数:1个",address:"夏都家园 (1号楼B单元401)"},{point:"116.480872,39.997200","title":"订单数:1个",address:"望京SOHO中心T1 (c座0707)"},{point:"116.469278,39.997421","title":"订单数:2个",address:"望京西园4区(A门) (426号楼2106)"},{point:"116.472630,39.992189","title":"订单数:2个",address:"北京市朝阳区东亚望京中心B座1808 (北京市朝阳区东亚望京中心B座1808)"},{point:"116.489176,40.007724","title":"订单数:3个",address:"望京东路6号 (望京国际研发园F座美团网)"},{point:"116.481175,39.996748","title":"订单数:4个",address:"望京SOHO中心T1 (C座511)"},{point:"116.480728,39.995960","title":"订单数:4个",address:"望京SOHO中心T3-办公(入口) (45层海马玩)"},{point:"116.478784,39.989812","title":"订单数:3个",address:"悠乐汇E座 (2106室)"},{point:"116.483780,40.006722","title":"订单数:3个",address:"摩托罗拉大厦"},{point:"116.488400,40.006508","title":"订单数:8个",address:"望京国际研发园C座 (望京国际研发园C座)"},{point:"116.474442,39.983986","title":"订单数:1个",address:"北京经济管理职业学院 (北京经济管理职业学院)"},{point:"116.488400,40.006508","title":"订单数:8个",address:"望京国际研发园C座 (望京国际研发园C座)"},{point:"116.483664,39.998340","title":"订单数:4个",address:"融科望京中心A座 (1906)"},{point:"116.469278,39.997421","title":"订单数:2个",address:"望京西园4区(A门) (426号楼2106)"},{point:"116.478336,40.001324","title":"订单数:2个",address:"望京西园(三区) (311号楼2206)"},{point:"116.470166,39.996368","title":"订单数:3个",address:"望京西园421号楼 (421号楼708)"},{point:"116.488124,40.006465","title":"订单数:3个",address:"望京国际研发园C座(正门) (东门bc座)"},{point:"116.472630,39.992189","title":"订单数:2个",address:"北京市朝阳区东亚望京中心B座1808 (北京市朝阳区东亚望京中心B座1808)"},{point:"116.479934,39.985504","title":"订单数:1个",address:"渤海银行(望京支行)"},{point:"116.483242,39.997772","title":"订单数:1个",address:"融科望京中心B座 (16层)"},{point:"116.472249,39.991946","title":"订单数:1个",address:"东亚·望京中心A座-出入口2 (A座1115)"},{point:"116.488456,40.006784","title":"订单数:5个",address:"望京国际研发园 (望京东路6号望京国际研发园三期)"},{point:"116.489440,39.997024","title":"订单数:2个",address:"保利中央公园艺林园(北门) (望京保利中央公园麦田房产)"},{point:"116.483520,39.998496","title":"订单数:1个",address:"融科望京中心A座(正门) (1906)"},{point:"116.483664,39.998340","title":"订单数:4个",address:"融科望京中心A座 (1906)"},{point:"116.483664,39.998340","title":"订单数:4个",address:"融科望京中心A座 (1906)"},{point:"116.472936,40.000448","title":"订单数:1个",address:"望京西园329号楼 (608)"},{point:"116.489342,39.995872","title":"订单数:1个",address:"保利·中央公园艺林园15号楼1单元301 (保利·中央公园艺林园15号楼1单元301)"},{point:"116.485904,39.994984","title":"订单数:1个",address:"国风北京 (606栋2104室)"},{point:"116.476364,40.001495","title":"订单数:1个",address:"望京西园(三区)303号楼304 (望京西园(三区)303号楼304)"},{point:"116.488880,40.007684","title":"订单数:4个",address:"梅赛德斯-奔驰乘用车中国研发中心"},{point:"116.478784,39.989812","title":"订单数:3个",address:"悠乐汇E座 (2106室)"},{point:"116.479936,39.985504","title":"订单数:2个",address:"渤海银行(望京支行) (1F)"},{point:"116.492104,40.005364","title":"订单数:2个",address:"中轻大厦B座 (1单元2701)"},{point:"116.473025,39.986368","title":"订单数:2个",address:"金兴路2号院2号楼 (二单元501)"},{point:"116.483780,40.006722","title":"订单数:3个",address:"摩托罗拉大厦"},{point:"116.469672,39.994568","title":"订单数:1个",address:"望京西园426号楼 (二楼201)"},{point:"116.471088,39.990212","title":"订单数:1个",address:"望花路西里5号楼-二单元 (402)"},{point:"116.473025,39.986368","title":"订单数:2个",address:"金兴路2号院2号楼 (1单元702)"},{point:"116.490792,40.005400","title":"订单数:2个",address:"中轻大厦(溪阳东路)"},{point:"0,0","title":"订单数:2个",address:"望京星源国际"},{point:"116.483780,40.006722","title":"订单数:3个",address:"摩托罗拉大厦"},{point:"116.477487,40.004156","title":"订单数:1个",address:"望京西园102号楼-四单元 (601)"},{point:"116.489616,39.996540","title":"订单数:1个",address:"保利·中央公园艺林园 (13号楼 2单元 201)"},{point:"116.474216,40.007792","title":"订单数:1个",address:"望京花园(东区) (203号楼2603室)"},{point:"116.480088,40.003452","title":"订单数:1个",address:"慧谷阳光 (206号楼5单元302室)"},{point:"116.480192,40.003400","title":"订单数:2个",address:"慧谷阳光207号楼 (4单元702)"},{point:"116.481888,40.001740","title":"订单数:1个",address:"宝星园(北门) (104号16C)"},{point:"116.478336,40.001324","title":"订单数:2个",address:"望京西园(三区) (311号楼2206)"},{point:"116.472768,39.992288","title":"订单数:1个",address:"东亚·望京中心B座 (8楼820)"},{point:"116.480250,40.003424","title":"订单数:1个",address:"慧谷阳光 (朝阳区阜安西路慧谷阳光2021单元403室)"},{point:"116.475664,40.000036","title":"订单数:1个",address:"望京西园3区 (302号楼104室)"},{point:"116.466872,39.988748","title":"订单数:1个",address:"阜通西大街18号院2号楼 (1单元908)"},{point:"116.488788,40.006086","title":"订单数:1个",address:"望京国际研发园(东南门) (FG座美团网)"},{point:"116.470776,39.989420","title":"订单数:2个",address:"望花路西里社区 (20号楼20层7号门)"},{point:"116.466528,39.996812","title":"订单数:1个",address:"广顺北大街31号院1号楼-B单元 (夏都家园1号楼B单元1405)"},{point:"116.481175,39.996748","title":"订单数:4个",address:"望京SOHO中心T1 (1047鲁艺十三)"},{point:"116.489388,40.006859","title":"订单数:3个",address:"望京国际研发园E座 (施耐德北门，美团网)"},{point:"116.489384,40.006860","title":"订单数:8个",address:"望京国际研发园E座 (望京国际研发园美团网)"},{point:"116.481776,39.990888","title":"订单数:1个",address:"方恒国际中心C座 (3-310)"},{point:"116.490834,40.005123","title":"订单数:1个",address:"中轻大厦A座(正门) (15层)"},{point:"116.479936,39.985504","title":"订单数:2个",address:"渤海银行(望京支行)"},{point:"116.473256,39.987216","title":"订单数:1个",address:"点击未来沁居(东南门) (410)"},{point:"116.470776,39.989420","title":"订单数:2个",address:"望花路西里社区 (20号楼20层7号门)"},{point:"116.478684,39.985421","title":"订单数:1个",address:"嘉润花园D座 (108室)"},{point:"116.489112,40.007700","title":"订单数:2个",address:"美团网 (望京国际研发园美团网北门)"},{point:"116.488241,40.006215","title":"订单数:1个",address:"望京国际研发园B座 (4层)"},{point:"116.468610,39.995296","title":"订单数:2个",address:"望京西园4区(西一门) (424楼 1009)"},{point:"116.468838,39.995108","title":"订单数:2个",address:"望京西园424号楼 (1009)"},{point:"116.468616,39.995296","title":"订单数:1个",address:"望京西园4区(西一门) (424楼1009)"},{point:"116.482504,39.996492","title":"订单数:1个",address:"望京SOHO-P1区 (2楼)"},{point:"116.489176,40.007724","title":"订单数:3个",address:"望京东路6号 (望京国际研发园F座美团网)"},{point:"116.481080,39.990492","title":"订单数:3个",address:"方恒国际中心B座(正门) (1001)"},{point:"116.470166,39.996368","title":"订单数:3个",address:"望京西园421号楼 (421号楼708)"},{point:"116.487720,40.006224","title":"订单数:1个",address:"望京国际研发园(正门) (F座北门)"},{point:"116.473184,39.987712","title":"订单数:1个",address:"点击未来沁居 (16号楼9层906)"},{point:"116.468610,39.995296","title":"订单数:2个",address:"望京西园4区(西一门) (424楼1009)"},{point:"116.489112,40.007700","title":"订单数:2个",address:"美团网 (望京国际研发园美团网北门)"},{point:"116.476158,40.000293","title":"订单数:1个",address:"望京西园3区 (308号楼304室)"},{point:"116.488256,40.007024","title":"订单数:2个",address:"望京国际研发园A座(正门) (美团网)"},{point:"116.489248,39.998181","title":"订单数:1个",address:"望京东园7区8号楼 (8-37)"},{point:"116.470239,39.993570","title":"订单数:3个",address:"里外里公寓 (广顺北大街429号里外里3-602)"},{point:"116.480728,39.995960","title":"订单数:4个",address:"望京SOHO中心T3-办公(入口) (望京SOHO中心T3-办公(入口))"},{point:"116.470166,39.996368","title":"订单数:3个",address:"望京西园421号楼 (421号楼708)"},{point:"116.472648,39.997516","title":"订单数:1个",address:"望京西园411号楼 (411~2111)"},{point:"116.488256,40.007024","title":"订单数:2个",address:"望京国际研发园A座(正门) (美团网)"},{point:"116.489438,39.997026","title":"订单数:1个",address:"保利中央公园艺林园(北门) (保利中央公园艺林园(北门)麦田房产)"},{point:"116.488124,40.006465","title":"订单数:3个",address:"望京国际研发园C座(正门)"},{point:"116.485949,39.990174","title":"订单数:1个",address:"望京国际商业中心(东北门) (大中电器四层)"},{point:"116.473685,39.993112","title":"订单数:1个",address:"首开广场 (4层)"},{point:"116.483776,40.006720","title":"订单数:1个",address:"摩托罗拉大厦"},{point:"116.472646,39.997515","title":"订单数:2个",address:"望京西园411号楼 (望京西园四区411号楼1701室)"},{point:"116.488560,40.007084","title":"订单数:2个",address:"施耐德电气 (望京国际研发园-美团网)"},{point:"116.488240,40.006216","title":"订单数:5个",address:"望京国际研发园B座 (东门)"},{point:"116.488456,40.006784","title":"订单数:5个",address:"望京国际研发园 (望京国际研发园F/G座)"},{point:"116.481133,39.996727","title":"订单数:1个",address:"望京soho塔1B座 (2309)"},{point:"116.476798,39.997340","title":"订单数:1个",address:"合生麒麟社3号楼 (3号楼1505)"},{point:"116.488576,40.007592","title":"订单数:2个",address:"戴姆勒大中华区投资有限公司 (研发园北门)"},{point:"116.488124,40.006465","title":"订单数:3个",address:"望京国际研发园C座(正门) (东门bc座)"},{point:"116.488584,40.006424","title":"订单数:1个",address:"望京东路6号 (望京国际研发园C座)"},{point:"116.488120,40.006464","title":"订单数:4个",address:"望京国际研发园C座(正门) (美团)"},{point:"116.488880,40.007684","title":"订单数:4个",address:"梅赛德斯-奔驰乘用车中国研发中心"},{point:"116.485920,40.008468","title":"订单数:4个",address:"锐创国际中心A座"},{point:"116.473354,39.992215","title":"订单数:1个",address:"朝阳区广顺南大街401号号 (东亚望京中心写字楼B座3309)"},{point:"116.489384,40.006860","title":"订单数:8个",address:"望京国际研发园F座 (美团网北门)"},{point:"116.488400,40.006508","title":"订单数:8个",address:"望京国际研发园C座 (望京国际研发园C座)"},{point:"116.484110,39.998904","title":"订单数:1个",address:"望京东园503号楼 (望京东园五区融科橄榄城502号楼底商顺丰速运)"},{point:"116.489440,39.997024","title":"订单数:2个",address:"保利中央公园艺林园(北门) (望京保利中央公园麦田房产)"},{point:"116.483664,39.998340","title":"订单数:4个",address:"融科望京中心A座 (融科望京中心A座506)"},{point:"116.488760,39.998920","title":"订单数:1个",address:"浦项中心B座 (10层)"},{point:"116.480040,39.997264","title":"订单数:1个",address:"望京SOHO中心T2 (b座803)"},{point:"116.489388,40.006859","title":"订单数:3个",address:"望京国际研发园E座"},{point:"116.483668,39.998339","title":"订单数:1个",address:"融科望京中心A座 (2008)"},{point:"116.489388,40.006859","title":"订单数:3个",address:"望京国际研发园E座 (北门)"},{point:"116.488400,40.006509","title":"订单数:4个",address:"望京国际研发园C座 (施耐德电气大厦东门)"},{point:"116.490794,40.005401","title":"订单数:1个",address:"中轻大厦(溪阳东路) (16楼)"},{point:"116.480567,39.996138","title":"订单数:3个",address:"望京SOHO中心T3 (A座3楼)"},{point:"116.480568,39.996140","title":"订单数:3个",address:"望京SOHO中心T3 (北京朝阳区望京soho T3 A座22层)"},{point:"116.488560,40.007084","title":"订单数:2个",address:"施耐德电气 (望京国际研发园(东门）)"},{point:"116.490792,40.005400","title":"订单数:2个",address:"中轻大厦(溪阳东路) (中轻大厦A座)"},{point:"116.481426,39.999017","title":"订单数:1个",address:"宝星华庭公寓(东门) (东田造型)"},{point:"116.468838,39.995108","title":"订单数:2个",address:"望京西园424号楼 (2211)"},{point:"116.472646,39.997515","title":"订单数:2个",address:"望京西园411号楼 (望京西园四区411号楼1701室)"},{point:"116.477044,40.002995","title":"订单数:1个",address:"望京西园111号楼-二单元 (6层601)"},{point:"116.480202,39.997849","title":"订单数:1个",address:"望京SOHO中心T2-商业(北入口) (大堂)"},{point:"116.481608,39.996140","title":"订单数:1个",address:"望京SOHO中心T1-商业(东入口) (大堂)"}];

这里注意先是经度，再是维度。

另外，推荐酸奶小妹的博客，非常好，写的：

http://www.cnblogs.com/milkmap/archive/2011/03/22/1991577.html?lo

作者：图里斯歌

2015年12月26日 22:49:14 笔