<!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,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style> <script type="text/javascript"
//ak填自己申请的ak
src="http://api.map.baidu.com/api?v=2.0& ak=mW9Qzc5IiF3vQUp5jw0tWApm9vGxbWee">
</script> <title>百度地图api展示</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript">
//新建三个地图上点
var points = [ {"lat":31.15721243142649,"lng":121.11893061613377,"quyu":"聚类-1"},
{"lat":31.022895636171828,"lng":121.8634092322954,"quyu":"聚类-10"},
{"lat":31.207521810244895,"lng":121.26829516708558,"quyu":"聚类-100"},
{"lat":30.91095770991601,"lng":121.72884881113485,"quyu":"聚类-101"},
{"lat":31.32647819209382,"lng":121.86076599818415,"quyu":"聚类-102"},
{"lat":31.469229689599654,"lng":121.2609830271056,"quyu":"聚类-103"},
{"lat":31.644035958268685,"lng":121.40174879068758,"quyu":"聚类-104"},
{"lat":31.388248744719,"lng":121.72028280785207,"quyu":"聚类-105"},
{"lat":31.05992086815603,"lng":120.99964353663078,"quyu":"聚类-106"},
{"lat":30.815767203518664,"lng":121.158163462001,"quyu":"聚类-107"},
{"lat":30.81097080333614,"lng":121.30047936475725,"quyu":"聚类-108"},
{"lat":31.30842702091752,"lng":121.46113228931574,"quyu":"聚类-109"},
{"lat":31.008620885276986,"lng":121.37149028749313,"quyu":"聚类-11"},
{"lat":31.64258455170967,"lng":121.62596157600218,"quyu":"聚类-110"},
{"lat":31.716718173645894,"lng":121.39300563063071,"quyu":"聚类-111"},
{"lat":31.38886023046955,"lng":121.45023999257887,"quyu":"聚类-112"},
{"lat":31.24654633928512,"lng":121.16058671473294,"quyu":"聚类-113"},
{"lat":31.16996188141776,"lng":121.39496656264592,"quyu":"聚类-114"},
{"lat":30.873695034102656,"lng":121.20020211956911,"quyu":"聚类-115"},
{"lat":31.14873399114802,"lng":121.31941812590999,"quyu":"聚类-116"},
{"lat":31.000228327875934,"lng":121.73336772832619,"quyu":"聚类-117"},
{"lat":31.488789128744042,"lng":121.80439835763283,"quyu":"聚类-118"},
{"lat":31.010073756926378,"lng":121.16219447152395,"quyu":"聚类-119"},
{"lat":30.867567936800477,"lng":121.5839566351383,"quyu":"聚类-12"},
{"lat":31.77732463264251,"lng":121.27211771459226,"quyu":"聚类-120"},
{"lat":30.891012146926304,"lng":121.1190424846474,"quyu":"聚类-13"},
{"lat":31.350042523299017,"lng":121.82540042900878,"quyu":"聚类-14"},
{"lat":31.11214914028598,"lng":120.88532623546875,"quyu":"聚类-15"},
{"lat":31.393207290039392,"lng":121.20944210845228,"quyu":"聚类-16"},
{"lat":31.413325367640095,"lng":121.66424439035218,"quyu":"聚类-17"},
{"lat":31.23292357953147,"lng":121.35904843238679,"quyu":"聚类-18"},
{"lat":31.680316231558262,"lng":121.3407330827971,"quyu":"聚类-19"},
{"lat":30.743835749999977,"lng":121.97422870689653,"quyu":"聚类-2"},
{"lat":30.88321147218949,"lng":121.78650034865704,"quyu":"聚类-20"},
{"lat":31.260947492974402,"lng":121.52945299931389,"quyu":"聚类-21"},
{"lat":31.60612666490794,"lng":121.67473706966197,"quyu":"聚类-22"},
{"lat":30.99888516546307,"lng":121.03535220230141,"quyu":"聚类-23"},
{"lat":31.47600168413471,"lng":121.86540688575988,"quyu":"聚类-24"},
{"lat":30.88798383543979,"lng":121.27684224485128,"quyu":"聚类-25"},
{"lat":31.786934163305936,"lng":121.37784029307335,"quyu":"聚类-26"},
{"lat":31.00109170489735,"lng":121.52742722151653,"quyu":"聚类-27"},
{"lat":31.149896582853668,"lng":121.76405735384616,"quyu":"聚类-28"},
{"lat":30.891082635632255,"lng":121.43449413987432,"quyu":"聚类-29"},
{"lat":31.56201124161033,"lng":121.79667496004221,"quyu":"聚类-3"},
{"lat":31.611727266374483,"lng":121.49649493133377,"quyu":"聚类-30"},
{"lat":31.27531341409953,"lng":121.23449575556765,"quyu":"聚类-31"},
{"lat":31.273079512588783,"lng":121.67248058088724,"quyu":"聚类-32"},
{"lat":30.98111959914885,"lng":121.66840758722493,"quyu":"聚类-33"},
{"lat":31.022469691745137,"lng":121.23430300883513,"quyu":"聚类-34"},
{"lat":31.131409873456978,"lng":121.46022826100936,"quyu":"聚类-35"},
{"lat":30.893805526648126,"lng":121.92249624229883,"quyu":"聚类-36"},
{"lat":31.516806452597496,"lng":121.74479331217042,"quyu":"聚类-37"},
{"lat":31.349112813593766,"lng":121.27593234347447,"quyu":"聚类-38"},
{"lat":31.104173751038452,"lng":121.25450391357428,"quyu":"聚类-39"},
{"lat":31.82239907932287,"lng":121.23820211300861,"quyu":"聚类-4"},
{"lat":31.240131742784275,"lng":121.09543697842484,"quyu":"聚类-40"},
{"lat":31.347752153257975,"lng":121.5300781850078,"quyu":"聚类-41"},
{"lat":31.313631356505695,"lng":121.38680486556262,"quyu":"聚类-42"},
{"lat":30.96680410253992,"lng":121.80367405447682,"quyu":"聚类-43"},
{"lat":31.72310224879901,"lng":121.28615361992509,"quyu":"聚类-44"},
{"lat":30.802755077760374,"lng":121.23697853392181,"quyu":"聚类-45"},
{"lat":30.86556382902224,"lng":121.03643429892334,"quyu":"聚类-46"},
{"lat":30.962723007856916,"lng":121.1092060692695,"quyu":"聚类-47"},
{"lat":31.09159496029094,"lng":121.3784449122729,"quyu":"聚类-48"},
{"lat":31.668200064105523,"lng":121.45524863259024,"quyu":"聚类-49"},
{"lat":31.12385066438267,"lng":121.60366431442638,"quyu":"聚类-5"},
{"lat":31.115667008460402,"lng":121.05401159621381,"quyu":"聚类-50"},
{"lat":30.88716290580255,"lng":121.66302989052812,"quyu":"聚类-51"},
{"lat":31.75595377610763,"lng":121.33363496126033,"quyu":"聚类-52"},
{"lat":31.349149214658144,"lng":121.76325477626342,"quyu":"聚类-53"},
{"lat":31.56307079022191,"lng":121.60316883620929,"quyu":"聚类-54"},
{"lat":31.081522882688418,"lng":121.68852439040303,"quyu":"聚类-55"},
{"lat":31.58710260262984,"lng":121.73670370263685,"quyu":"聚类-56"},
{"lat":31.314888826650193,"lng":121.60335593436385,"quyu":"聚类-57"},
{"lat":31.219063148018012,"lng":121.6027286497688,"quyu":"聚类-58"},
{"lat":31.0495291882347,"lng":120.93308360758353,"quyu":"聚类-59"},
{"lat":31.227954526092137,"lng":121.44882720426766,"quyu":"聚类-60"},
{"lat":31.616839044734746,"lng":121.56200742891977,"quyu":"聚类-61"},
{"lat":31.28516431751304,"lng":121.30794730453061,"quyu":"聚类-62"},
{"lat":31.76825329091869,"lng":121.21171486095625,"quyu":"聚类-63"},
{"lat":31.47634900502508,"lng":121.33448804776548,"quyu":"聚类-64"},
{"lat":30.943624131984546,"lng":121.20034369641881,"quyu":"聚类-65"},
{"lat":31.53914625364866,"lng":121.84882849819296,"quyu":"聚类-66"},
{"lat":30.85258084018207,"lng":121.35978653154709,"quyu":"聚类-67"},
{"lat":31.345791129711476,"lng":121.14377501156996,"quyu":"聚类-68"},
{"lat":30.921518073821762,"lng":121.51878576138326,"quyu":"聚类-69"},
{"lat":30.769390996140682,"lng":121.36443388537002,"quyu":"聚类-7"},
{"lat":30.929469461860165,"lng":121.35930080034848,"quyu":"聚类-70"},
{"lat":31.167007667086608,"lng":121.67380315111004,"quyu":"聚类-71"},
{"lat":30.966257422202528,"lng":121.4460792499304,"quyu":"聚类-72"},
{"lat":31.089905113137505,"lng":121.82645158506682,"quyu":"聚类-73"},
{"lat":31.083227172874896,"lng":121.52901407819422,"quyu":"聚类-74"},
{"lat":30.950760228340666,"lng":121.59893449402162,"quyu":"聚类-75"},
{"lat":30.95448564473112,"lng":121.8820198225937,"quyu":"聚类-76"},
{"lat":31.731154790593543,"lng":121.45730656510742,"quyu":"聚类-77"},
{"lat":31.055227179010846,"lng":121.09987395231089,"quyu":"聚类-78"},
{"lat":31.039020625623156,"lng":121.6084578302275,"quyu":"聚类-79"},
{"lat":31.43313195714851,"lng":121.39245319408623,"quyu":"聚类-8"},
{"lat":30.929222189644516,"lng":121.03280149091113,"quyu":"聚类-80"},
{"lat":31.04864410095009,"lng":121.44539287175071,"quyu":"聚类-81"},
{"lat":30.965738735625962,"lng":121.28790001218852,"quyu":"聚类-82"},
{"lat":31.174619242802432,"lng":121.19622788834702,"quyu":"聚类-83"},
{"lat":31.051198801301833,"lng":121.30738745944092,"quyu":"聚类-84"},
{"lat":31.057436242897822,"lng":121.77235966787985,"quyu":"聚类-85"},
{"lat":31.527386161391682,"lng":121.92147947631521,"quyu":"聚类-86"},
{"lat":31.54037120267328,"lng":121.67849655610577,"quyu":"聚类-87"},
{"lat":30.732197640119985,"lng":121.29773342029284,"quyu":"聚类-88"},
{"lat":31.173576339448434,"lng":121.52939132823047,"quyu":"聚类-89"},
{"lat":31.68956838086415,"lng":121.53011568543369,"quyu":"聚类-9"},
{"lat":31.821075370232432,"lng":121.3132413452172,"quyu":"聚类-90"},
{"lat":31.381382094398017,"lng":121.33362750935001,"quyu":"聚类-91"},
{"lat":31.437788888317986,"lng":121.60196011822825,"quyu":"聚类-92"},
{"lat":31.08576231112109,"lng":121.17416543091561,"quyu":"聚类-93"},
{"lat":31.32311573596013,"lng":121.197706556913,"quyu":"聚类-94"},
{"lat":30.845053324873355,"lng":121.50388874051096,"quyu":"聚类-95"},
{"lat":30.811621194852215,"lng":121.43419483914595,"quyu":"聚类-96"},
{"lat":31.123087894296987,"lng":120.92145331937115,"quyu":"聚类-97"},
{"lat":30.885979528170257,"lng":121.853234138574,"quyu":"聚类-98"},
{"lat":31.221697706049877,"lng":121.7277570358836,"quyu":"聚类-99"}
];
//创建标注点并添加到地图中
function addMarker(points) {
//循环建立标注点
for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
var marker = new BMap.Marker(point); //将点转化成标注点
var label = new BMap.Label(points[i].quyu, {
offset : new BMap.Size(5, 4)
});
label.setStyle({
background:'none',color:'#fff',border:'none'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
});
map.addOverlay(marker); //将标注点添加到地图上
//添加监听事件
(function() {
var thePoint = points[i];
marker.addEventListener("click",
function() {
showInfo(this,thePoint);
});
})();
}
}
function showInfo(thisMarker,point) {
//获取点的信息
var sContent =
'<ul style="margin:0 0 5px 0;padding:0.2em 0">'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style=" 50px;display: inline-block;">id：</span>' + point.quyu + '</li>'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style=" 50px;display: inline-block;">纬度：</span>' +
point.lat +
'<span style=" 50px;display: inline-block;"> 经度：</span>' + point.lng +'</li>'
+'</ul>';
var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}
function addMarker(points){ // 创建图标对象
// 创建标注对象并添加到地图
for(var i = 0,pointsLen = points.length;i <pointsLen;i++){
var point = new BMap.Point(points[i].lng,points[i].lat);
var marker = new BMap.Marker(point);
var label = new BMap.Label(points[i].quyu, {
offset : new BMap.Size(5, 4)
});
label.setStyle({
background:'none',color:'#fff',border:'none'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
});
marker.setLabel(label);//显示地理名称 a
map.addOverlay(marker);
//给标注点添加点击事件。使用立即执行函数和闭包
(function() {
var thePoint = points[i];
marker.addEventListener("click",function(){
showInfo(this,thePoint);
});
})();
}
}
//创建地图
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(121.39, 31.34), 15); // 设置中心点
map.centerAndZoom( "湖南");
map.setCurrentCity("湖南"); //设置上海
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
addMarker(points);
</script>