百度地圖開發常用網站
1、百度地圖開放平臺
http://lbsyun.baidu.com/
2、百度地圖 Javascript API
-
JavaScript API v3.0 http://lbsyun.baidu.com/index.php?title=jspopular3.0
-
JavaScript API v2.0 http://lbsyun.baidu.com/index.php?title=jspopular
-
JavaScript API Lite http://lbsyun.baidu.com/index.php?title=jspopularLiteV1
3、JavaScript API v2.0類參考
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
4、百度地圖示例DEMO（JavaScript API v2.0）
http://lbsyun.baidu.com/jsdemo.htm#a1_2
5、百度地圖 ak 申請：（JavaScript API v2.0）
http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
6、開源庫（JavaScript API v2.0）：鼠標繪製工具條、熱力圖、聚合marker、測距工具、自定義覆蓋物、自定義信息窗口、路書等功能
http://lbsyun.baidu.com/index.php?title=jspopular/openlibrary
7、百度地圖座標拾取系統
http://api.map.baidu.com/lbsapi/getpoint/index.html
說明
項目中使用 JavaScript API v2.0 版本，當然也可以使用最新版 V3.0。
JavaScript API Lite是移動端瀏覽器上構建地圖應用
百度地圖添加圖層顯示時驗證圖層是否存在
1、百度地圖 ak 申請：（JavaScript API v2.0）
http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
2、實現效果圖如下：
當再次添加相同的內容時，系統會提示圖層已經標註在地圖上。不再重複添加圖層。
動態圖
3、網頁源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度地圖添加圖層顯示時驗證是否存在</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你在百度地圖開放平臺申請的ak"></script>
<!-- 你在百度地圖開放平臺申請的ak -->
</head>
<body>
<div style="position: absolute;z-index: 10;left: 180px;">
<input type="button" value="添加圖層" id="addMarkerBtn" />
</div>
<div id="allmap" style="position: absolute; width: 100%; top: 0px; bottom: 0px"></div>
<script type="text/javascript">
//marker標籤偏移量
var searchPosiMarkerOffset = 10000;
//添加驗證是否已經標註信息,已經存在不再標註，給出提示信息
function existsSearchPosiMarker(id, searchPosiMarkerOffset, point) {
var existsMarker = false;
//獲得地圖上所有的圖層信息
var allOverlay = map.getOverlays();
var length = allOverlay.length;
for (var i = 0; i < length; i++) {
//判斷是否是marker對象，這裏可以根據自己的需求進行處理，我們添加圖層時一般都使用marker對象
if (allOverlay[i] instanceof BMap.Marker) {
var currentMarker = allOverlay[i];
var currentMarkerZIndex = currentMarker.zIndex;
var showMarerZindex = parseInt(id) + searchPosiMarkerOffset;
if (currentMarkerZIndex && currentMarkerZIndex == showMarerZindex) {
currentMarker.setPosition(point);
map.panTo(point);
var existsMarker = true;
break;
} else {
continue
}
}
}
return existsMarker;
}
//添加顯示圖層顯示： 驗證圖層是否存在
function addMarker(id , marker ) {
//獲取當前圖層的點座標
var currentPoint = marker.getPosition();
//添加驗證是否已經標註單位信息, 已經存在不再標註，給出提示信息
var existsMarker = existsSearchPosiMarker(id, searchPosiMarkerOffset, currentPoint);
if (existsMarker == true) {
window.alert('地圖上已經標註該圖層！');
return false;
}
//圖層展示，marker標籤偏移量 var searchPosiMarkerOffset = 10000;
var currentZIndex = parseInt(id) + searchPosiMarkerOffset;//currentZIndex值必須唯一，用於每次添加圖層時驗證圖層是否存在
marker.setZIndex(currentZIndex);
map.panTo(point);
map.addOverlay(marker);
}
//紅色
var icon_red = new BMap.Icon("img/icon_red.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });
//藍色（高亮）
var icon_highlight = new BMap.Icon("img/icon_highlight.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });
//綠色
var icon_green = new BMap.Icon("img/icon_green.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });
var map = new BMap.Map("allmap", { minZoom: 9, maxZoom: 19 });
var point = new BMap.Point(116.128554, 24.294562);
var top_left_navigation = new BMap.NavigationControl();
map.addControl(top_left_navigation);// 添加平移縮放控件
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
map.enableScrollWheelZoom();//啓用滾輪放大縮小
map.centerAndZoom(point, 9);
var bmp_type = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });
map.addControl(bmp_type);
var styleOptions = {
strokeColor: "red", //邊線顏色。
fillColor: "red", //填充顏色。當參數爲空時，圓形將沒有填充效果。
strokeWeight: 3, //邊線的寬度，以像素爲單位。
strokeOpacity: 0.8, //邊線透明度，取值範圍0 - 1。
fillOpacity: 0.6, //填充的透明度，取值範圍0 - 1。
strokeStyle: 'solid' //邊線的樣式，solid或dashed。
}
map.disableDoubleClickZoom();
//使用不同的顏色顯示標籤
//紅色圖標顯示圖層1
var marker1 = new BMap.Marker(point, { icon: icon_red, offset: new BMap.Size(0, 0) });
var label1 = new BMap.Label("這是紅色圖標顯示的標籤內容", { offset: new BMap.Size(30, 0) });
label1.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微軟雅黑"});
label1.hide();
marker1.setLabel(label1);
//設置圖層可以被拖動
marker1.enableDragging();
//添加顯示圖層顯示： 驗證圖層是否存在
addMarker(1 , marker1 );
//綠色圖標顯示圖層2
var point2 = new BMap.Point(116.328554, 24.594562);//圖層2的座標
var marker2 = new BMap.Marker(point2, { icon: icon_green, offset: new BMap.Size(0, 0) });
var label2 = new BMap.Label("這是綠色圖標顯示的標籤內容", { offset: new BMap.Size(30, 0) });
label2.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微軟雅黑"});
label2.hide();
marker2.setLabel(label2);
//設置圖層可以被拖動
marker2.enableDragging();
//添加顯示圖層顯示： 驗證圖層是否存在
addMarker(2 , marker2 );
//往地圖中添加圖層
//map.addOverlay(marker1);
//map.addOverlay(marker2);
//添加按鈕點擊事件
var addMarkerBtn = document.getElementById("addMarkerBtn");
addMarkerBtn.onclick = function(){
alert("您點擊了添加圖層");
var point3 = new BMap.Point(115.328554, 23.594562);//圖層2的座標
var marker3 = new BMap.Marker(point3, { icon: icon_red, offset: new BMap.Size(0, 0) });
var label3 = new BMap.Label("這是手動添加圖層顯示的標籤內容", { offset: new BMap.Size(30, 0) });
label3.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微軟雅黑"});
marker3.setLabel(label3);
//設置圖層可以被拖動
marker3.enableDragging();
//添加顯示圖層顯示： 驗證圖層是否存在
addMarker(3 , marker3 );
}
</script>
</body>
</html>
源碼已經打包到百度雲盤，下載地址：
鏈接：https://pan.baidu.com/s/1RXMkeJrSh4eEiRUZPkyFIA
提取碼：qdaf