百度api實現框選，顯示框選區域內的資料，並且點選資料點顯示詳細資訊
阿新 • • 發佈：2018-12-29
下面我貼上所有原始碼，分享給大家，後臺資料隨便大家如何獲取1.開啟地圖，右上角是繪製多邊形的工具條。引用DrawingManager_min.js和DrawingManager_min.css即可2.選擇框選型別。框選區域，判斷點是否在多邊形中，大家可以參考百度提供的這個js（http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js）3.點選其中的資料點（maker）顯示對應的詳細資訊<!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 {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微軟雅黑";
}
#allmap {
width: 100%;
height: 700px;
}
#r-result {
width: 100%;
margin-top: 5px;
}
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=b6MPDAQdZRz5R62Z9XqH55pHG5vdmF7m"></script>
<script src="http://localhost:8080/library/JQueryUI/1.11.4/external/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<script src="http://localhost:8080/library/ExtJS/4.2.1/bootstrap.js?theme=gray&lang=zh_CN" type="text/javascript"></script>
<script src="libs/js/DrawingManager_min.js"></script>
<link href="libs/css/DrawingManager_min.css" rel="stylesheet" />
<title>地圖展示</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<!--<input id="NF-add" type="button" value="新增" />-->
<input id="NF-delete" type="button" value="刪除" />
<!--<input id="itemTree" type="button" value="顯示" />-->
</div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立Map例項
var centerPt = new BMap.Point(114.31, 30.52);
map.centerAndZoom(centerPt, 6); // 初始化地圖,設定中心點座標和地圖級別
map.addControl(new BMap.NavigationControl()); //新增地圖型別控制元件
map.setCurrentCity("武漢"); // 設定地圖顯示的城市 此項是必須設定的
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
//var mkr = new BMap.Marker(centerPt);
//滑鼠繪製完成回撥方法,獲取各個點的經緯度
var overlays = [];
var mlnglat = [];
var ply;//多邊形
//生成多邊形
function polygon(path) {
var pts = [];
var pt;
for (var j = 0; j < path.length; j++) {
pt = new BMap.Point(path[j].lng, path[j].lat);
pts.push(pt);
}
ply = new BMap.Polygon(pts);
//演示：將面新增到地圖上
map.clearOverlays();
map.addOverlay(ply);
}
overlaycomplete = function (e) {
overlays.push(e.overlay);
var path = e.overlay.getPath();//Array<Point> 返回多邊型的點陣列
for (var i = 0; i < path.length; i++) {
mlnglat.push("lng:" + path[i].lng + ",lat:" + path[i].lat);
}
//生成多邊形
polygon(path);
//載入所有主場的地理位置座標資料，然後判斷是否在多邊形內，在的話就顯示
Ext.Ajax.request({
url: '/Handler/Farm/Location/SearchLocationHandler.ashx?option=GetLocationInfo',
method: "POST",
params: {
},
async: true,
success: function (response) {
result = Ext.JSON.decode(response.responseText, true);
if (result.success) {
var mkr = new Array();
for (var k = 0; k < result.data.length; k++) {
var pointInfo = result.data[k];
mkr[k] = new BMap.Marker(new BMap.Point(result.data[k].NVC_LONGITUDE, result.data[k].NVC_LATITUDE));
InOrOutPolygon(result.data[k].NVC_LONGITUDE, result.data[k].NVC_LATITUDE, mkr[k], pointInfo);
}
}
else {
ShowErrorMsg("錯誤", result.message);
}
},
failure: function () {
ShowErrorMsg("錯誤", "請求超時或伺服器錯誤");
}
});
};
$('#NF-add').on('click', function () {
if (mlnglat.length == 0) {
alert("請先設定電子圍欄！");
} else {
alert(mlnglat);
}
});
var styleOptions = {
strokeColor: "red", //邊線顏色。
fillColor: "red", //填充顏色。當引數為空時，圓形將沒有填充效果。
strokeWeight: 3, //邊線的寬度，以畫素為單位。
strokeOpacity: 0.8, //邊線透明度，取值範圍0 - 1。
fillOpacity: 0.3, //填充的透明度，取值範圍0 - 1。
strokeStyle: 'solid' //邊線的樣式，solid或dashed。
}
//例項化滑鼠繪製工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否開啟繪製模式
enableDrawingTool: true, //是否顯示工具欄
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏離值
},
polygonOptions: styleOptions, //多邊形的樣式
});
//新增滑鼠繪製工具監聽事件，用於獲取繪製結果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
//2、刪除電子圍欄
$('#NF-delete').on('click', function () {
//for (var i = 0; i < overlays.length; i++) {
// map.removeOverlay(overlays[i]);
//}
//overlays.length = 0
map.clearOverlays();
});
//判斷點是否在多邊形內
function InOrOutPolygon(lng, lat, mk, pointInfo) {
var pt = new BMap.Point(lng, lat);
var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
if (result) {//在內部，把該點顯示在地圖上
var mk = new BMap.Marker(new BMap.Point(lng, lat));
mk.setPosition(pt);
map.addOverlay(mk);
mk.addEventListener("click", function () {
showInfo(this, pointInfo);
});
}
else {//不在內部
//var i = 0;
//mk.setPosition(pt);
//map.addOverlay(mk);
}
}
//顯示資訊視窗，顯示標註點的資訊。
function showInfo(thisMaker, 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: 100px;display: inline-block;">省份：</span>' + point.NVC_PROVINCE + '</li>'
+ '<li style="line-height: 26px;font-size: 15px;">'
+ '<span style="width: 100px;display: inline-block;">服務部名稱：</span>' + point.NVC_SERVICE_NAME + '</li>'
+ '<li style="line-height: 26px;font-size: 15px;">'
+ '<span style="width: 100px;display: inline-block;">養殖場主：</span>' + point.NVC_FARM_NAME + '</li>'
+ '<li style="line-height: 26px;font-size: 15px;">'
+ '<span style="width: 100px;display: inline-block;">詳細地址：</span>' + point.NVC_FARM_ADDRESS + '</li>'
+ '</ul>';
var infoWindow = new BMap.InfoWindow(sContent); // 建立資訊視窗物件
thisMaker.openInfoWindow(infoWindow); //圖片載入完畢重繪infowindow
}
</script>