一，首先是定位。
先定義6個百度坐標點，然后在坐標點上創建對應的marker，再通過map.addOverlay(marker)方法將6個marker定位在百度地圖中，並利用marker.disableMassClear()方法設置marker為不可被清除，最后為marker添加鼠標滑過事件。具體如下：
// 初始化百度地圖
var map = new BMap.Map('map');
map.centerAndZoom(new BMap.Point(116.3875773621, 39.9156402091), 6); //初始化地圖,設置中心點坐標和地圖級別
map.enableScrollWheelZoom(); //開啟鼠標滾輪縮放
//被定位在地圖中的6個點
var locPoints = [
new BMap.Point(108.574138248194, 34.197235684692),
new BMap.Point(108.683296262141, 33.877960833917),
new BMap.Point(108.518062680055, 38.057251109697),
new BMap.Point(108.546627635172, 38.312875770488),
new BMap.Point(109.151927017928, 34.686473580787),
new BMap.Point(108.411427712714, 33.266286514603)
];
//將6個點定位在地圖中
locPoints.forEach(function(value) {
var locMarkers;
locMarkers = new BMap.Marker(value);
map.addOverlay(locMarkers); //將標注添加到地圖中
locMarkers.disableMassClear(); //設置marker不可被清除
locMarkers.addEventListener("mouseover",function (e) {
openDataInfo(value, e);
});
});
//鼠標滑過marker事件
function openDataInfo(result, e) {
var carOpts = {
width : 200, // 信息窗口寬度
height: 120, // 信息窗口高度
title : "<b>設備信息</b>" , // 信息窗口標題
enableMessage:true //設置允許信息窗發送短息
};
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
carContent = '<br/><table><thead>'+
'<tr><th><label>快速操作：</label><a οnclick="showOrderTrackDiv()"><span style="color:#478FCA; margin-left:15px;">軌跡回放</span></a></th></tr></thead><tbody>'+
'<tr><td>經度：'+p.getPosition().lng+'</td></tr><tr><td>緯度：'+p.getPosition().lat+'</td></tr>'+
'</tbody></table></div>';
var infoWindow = new BMap.InfoWindow(carContent, carOpts); // 創建信息窗口對象
map.openInfoWindow(infoWindow, point); //開啟信息窗口
}
//軌跡回放函數
function showOrderTrackDiv(){
alert("軌跡回放函數");
}
二，畫圓、矩形、多邊形
首先得包含百度地圖鼠標繪制工具的css和js，如下：
<!--加載鼠標繪制工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<!--加載鼠標繪制工具-->
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
然后定義一個繪制樣式，並實例化鼠標繪制工具，最后為鼠標繪制工具添加鼠標繪制完成后的回調方法。具體如下：
var styleOptions = {
strokeColor:"black", //邊線顏色。
fillColor:"red", //填充顏色。當參數為空時，圓形將沒有填充效果。
strokeWeight: 3, //邊線的寬度，以像素為單位。
strokeOpacity: 0.8, //邊線透明度，取值范圍0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范圍0 - 1。
strokeStyle: 'solid' //邊線的樣式，solid或dashed。
}
//實例化鼠標繪制工具
var myDrawingManagerObject = new BMapLib.DrawingManager(map, {
isOpen: false, //是否開啟繪制模式
enableDrawingTool: true, //是否顯示工具欄
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏離值
},
circleOptions: styleOptions, //圓的樣式
polylineOptions: styleOptions, //線的樣式
polygonOptions: styleOptions, //多邊形的樣式
rectangleOptions: styleOptions //矩形的樣式
});
//添加鼠標繪制工具監聽事件，用於獲取繪制結果
myDrawingManagerObject.addEventListener('overlaycomplete', overlaycomplete);
三， 判斷點是否在圓內或矩形內
在鼠標繪制完成的回調方法中，利用BMapLib.GeoUtils.isPointInCircle(point, circleObject)判斷點是否在圓內，或者利用BMapLib.GeoUtils.isPointInPolygon(point, polygonObject)判斷點是否在矩形內。
在利用isPointInCircle或isPointInPolygon方法時，需在頁面中包含GeoUtils_min.js。如下：
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
具體如下：
function overlaycomplete(e){
var cirCount = 0;
var polyCount = 0;
myDrawingManagerObject.close(); //關閉畫圖
var drawingModeType = e.drawingMode; //獲取所畫圖形類型
locPoints.forEach(function(value) {
if (drawingModeType == "circle") {
//圓
if(BMapLib.GeoUtils.isPointInCircle(value, e.overlay)) {
cirCount++;
}
} else if (drawingModeType == "rectangle" || drawingModeType == "polygon") {
//矩形 或 多邊形
if(BMapLib.GeoUtils.isPointInPolygon(value, e.overlay)) {
polyCount++;
}
}
});
alert("圓中包含"+cirCount+"個定位點，多邊形或矩形中包含"+polyCount+"個定位點。");
map.removeOverlay(e.overlay); //畫完后清除所畫對象
}
最終效果如下圖所示：
鼠標滑過marker效果如下圖所示：
至此，如何在百度地圖中畫圓、畫矩形、畫多邊形，並且判斷坐標點是否在圓內、矩形內的功能就已經完成了。
————————————————