百度地圖api
<!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 {width: 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="width: 50px;display: inline-block;">id：</span>' + point.quyu + '</li>'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width: 50px;display: inline-block;">緯度：</span>' +
point.lat +
'<span style="width: 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>
相關文章
- 1. 百度地圖API
- 2. 百度地圖api
- 3. 百度地圖 api
- 4. ----百度地圖api----
- 5. 百度地圖api（摘自百度）
- 6. 【React】 百度地圖API
- 7. 百度地圖API用法
- 8. vue + 百度地圖api
- 9. 百度地圖API（一）
- 10. 百度地圖api相關
- 更多相關文章...
- • PHP 獲取圖像寬度與高度 - PHP參考手冊
- • 物理地址（MAC地址）是什麼？ - TCP/IP教程
- • 算法總結-廣度優先算法
- • 算法總結-深度優先算法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 百度地圖API
- 2. 百度地圖api
- 3. 百度地圖 api
- 4. ----百度地圖api----
- 5. 百度地圖api（摘自百度）
- 6. 【React】 百度地圖API
- 7. 百度地圖API用法
- 8. vue + 百度地圖api
- 9. 百度地圖API（一）
- 10. 百度地圖api相關