日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 综合教程 >内容正文

综合教程

百度地图应用

發布時間:2023/12/15 综合教程 26 生活家
生活随笔 收集整理的這篇文章主要介紹了 百度地图应用 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2017/6/14
Time: 11:39
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>熱點分布</title>
<style type="text/css">
body, html {
100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微軟雅黑";
}

.anchorBL {
display: none;
}

#l-map {
height: 70%;
100%;
float: left;

}

#function-map {
height: 30%;
100%;
float: left;
}


</style>

<link rel="stylesheet" type="text/css" href="easyui/icon.css">
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<link rel="stylesheet" type="text/css" href="mapImg/DrawingManager_min.css">
<link rel="stylesheet" type="text/css" href="mapImg/SearchInfoWindow_min.css">
</head>
<body>
<div id="function-map">
<button>基礎功能</button>
<table border="0" cellspacing="0px">

<tr>
<td>
<button>時間范圍</button>

<input id="startime" type="text" class="easyui-datetimebox">
~~~
<input id="endtime" type="text" class="easyui-datetimebox"
>


<button>IMSI</button>
<input class="easyui-textbox" id="imsi">


<button
onclick="query()">查詢
</button>

</td>

</tr>
<tr>
<td>
<button>位點</button>
<input class="easyui-textbox" id="weidian">
<button
onclick="searchWeidian()">位點查詢
</button>
&nbsp;&nbsp;
<input type="button" value="雙擊測距" onclick="ceju()"
/>
<input type="button" value="畫多邊形" onclick="draw(BMAP_DRAWING_POLYGON)"
/>
<input type="button" value="畫矩形" onclick="draw(BMAP_DRAWING_RECTANGLE)"
/>
<%--<input type="button" value="只顯示矩形內的點位" onclick="reSearchWeidian()"/>--%>

<input type="button" value="畫線" onclick="draw(BMAP_DRAWING_POLYLINE)"
/>
<input type="button" value="畫圓" onclick="draw(BMAP_DRAWING_CIRCLE)"
/>
<%--<input type="button" value="標注點" onclick="draw(BMAP_DRAWING_MARKER)"--%>
<%--style="color: #fff; 100px;height: 35px;"/>--%>

<input type="button" value="開啟線、面編輯功能" onclick="Editing('enable')"
/>
<input type="button" value="關閉線、面編輯功能" onclick="Editing('disable')"
/>
<input type="button" value="獲取繪制的覆蓋物個數" onclick="alert(overlays.length)"
/>
<input type="button" value="清除所有覆蓋物" onclick="clearAll()"
/>
<input type="button" value="多邊形的面積" onclick="getMianji()"
/>

<input type="button" value="復位" onclick="getDefault()"
/>
<input type="button" value="框選" onclick="kuanxuan()"
/>
右鍵獲取任意點的經緯度
</td>

</tr>

</table>
<div id="win" class="easyui-window" title="框選" closed="true"
data-options="iconCls:'icon-save',modal:true">
<div>
<form id="ff" method="post">
<table cellpadding="10" cellspacing="10" border="0">

<tr>
<th>序號</th>
<th>位點名稱
</th>
</tr>
<tbody id="tbody_add">
</tbody>
<tr>
<td><b>框選內容</b></td>

<td>
<span>
<input class="easyui-textbox" name="kxContent" id="kxContent"
data-options="multiline:true"
>
</span>
</td>
</tr>
</table>
</form>
</div>
<div>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
</div>
</div>

</div>
<div id="l-map">正在加載地圖...

</div>
<!--引用百度地圖API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jYNU39RZ3k37NUz1QduizaYD"></script>
<!--加載鼠標繪制工具-->
<script type="text/javascript" src="mapImg/DrawingManager_min.js"></script>
<script type="text/javascript" src="mapImg/DistanceTool_min.js"></script>
<script type="text/javascript" src="mapImg/GeoUtils_min.js"></script>
<script type="text/javascript" src="mapImg/EventWrapper.min.js"></script>
<script type="text/javascript" src="mapImg/EventWrapper.min.js"></script>
<script type="text/javascript" src="mapImg/SearchInfoWindow_min.js"></script>

<script type="text/javascript" src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-easyui-1.4.4/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

var return_positionJsonArray =
${positionJsonArray}
// console.log(return_positionJsonArray);

//117.126617,36.656588 濟南市
var map;

initMap();

function initMap() {
createMap();//創建地圖

addMarker();

}

function createMap() {
// debugger
// 創建Map實例
map = new BMap.Map("l-map");
var point = new BMap.Point(117.1510815360, 36.6647373487); // 創建點坐標
map.centerAndZoom(point, 10); // 初始化地圖,設置中心點坐標和地圖級別

//開啟鼠標滾輪縮放
map.enableScrollWheelZoom(true);
// 左下角,添加比例尺
var bottom_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
//左上角,添加縮放平移控件
var top_left_navigation = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 啟用顯示定位
enableGeolocation: false
});
map.addControl(bottom_left_control);
map.addControl(top_left_navigation);
//右上角,地圖類型控件
var mapType = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]});
map.addControl(mapType);
//右下角,鷹眼
var overViewOpen = new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
map.addControl(overViewOpen);

// // 禁用 雙擊縮放功能
// map.disableDoubleClickZoom();

}

// 禁用 雙擊縮放功能
map.disableDoubleClickZoom();

function G(id) {
return document.getElementById(id);
}


// 創建點位
function addMarker() {
var myIcon = new BMap.Icon("mapImg/marker/point.png", new BMap.Size(24, 36));
for (var i = 0; i < return_positionJsonArray.length; i++) {
// console.log(return_positionJsonArray[i].name);
var points = new BMap.Point(return_positionJsonArray[i].longitude, return_positionJsonArray[i].latitude);
var markers = new BMap.Marker(points, {icon: myIcon});
map.addOverlay(markers); // 創建點位 圖標
var label = new BMap.Label(return_positionJsonArray[i].name, {offset: new BMap.Size(10, -10)});
markers.setLabel(label); // 創建點位 標注

var content = "經度:" + return_positionJsonArray[i].longitude + "<br>緯度:" + return_positionJsonArray[i].latitude;

addClickHandler(content, markers); // 創建 信息窗口
}
}

function addClickHandler(content, markers) {
markers.addEventListener("click", function (e) {
openInfo(content, e)
}
);
}
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 創建信息窗口對象
map.openInfoWindow(infoWindow, point); //開啟信息窗口
}
var opts = {
200, // 信息窗口寬度
height: 80, // 信息窗口高度
title: "信息窗口", // 信息窗口標題
enableMessage: true//設置允許信息窗發送短息
};

// 位點查詢
function searchWeidian() {

var weidian = $('#weidian').val();
if (weidian == '' || weidian == null) {
alert("請輸入要查詢的位點");
} else {

var myIcon = new BMap.Icon("mapImg/marker/point.png", new BMap.Size(24, 36));
for (var i = 0; i < return_positionJsonArray.length; i++) {
// console.log(return_positionJsonArray[i].name);
if (return_positionJsonArray[i].name == weidian) {
var point = new BMap.Point(return_positionJsonArray[i].longitude, return_positionJsonArray[i].latitude);
map.centerAndZoom(point, 11);
break;
}

}
addDrawingManager();
}
}

function ceju() {

var myDis = new BMapLib.DistanceTool(map);
// map.addEventListener("click", function () {
// myDis.open(); //開啟鼠標測距
// //myDis.close(); //關閉鼠標測距大
// });
map.addEventListener("dblclick", function () {
myDis.open(); //開啟鼠標測距
// myDis.close(); //關閉鼠標測距大
});

}
var kxName = "";
var drawingManagers;
function kuanxuan() {
//實例化鼠標繪制工具

drawingManagers = new BMapLib.DrawingManager(map, {
isOpen: false, //是否開啟繪制模式
//enableDrawingTool: true, //是否顯示工具欄
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏離值
},

rectangleOptions: styleOptions //矩形的樣式
});
drawingManagers.open();
drawingManagers.setDrawingMode(BMAP_DRAWING_RECTANGLE);
//添加鼠標繪制工具監聽事件,用于獲取繪制結果
// drawingManagers.addEventListener('overlaycomplete', overlaycompletess(e));
drawingManagers.addEventListener('overlaycomplete', function (e) {
var overlays = e.overlay;
var overlay = overlays.getPath();
var lngA = overlay[0].lng;
var latA = overlay[0].lat;
var lngB = overlay[1].lng;
var latB = overlay[1].lat;
var lngC = overlay[2].lng;
var latC = overlay[2].lat;
var lngD = overlay[3].lng;
var latD = overlay[3].lat;
//alert("lngA:"+lngA+"http://lngB"+lngB+"http:///lngC"+lngC+"http:///lngD"+lngD);
//alert("latA:"+latA+"http://latB"+latB+"http:///latC"+latC+"http:///latD"+latD);

//注意:lng 比較a 和b ,lat 比較 a 和 c ;
var lngE;
var lngW;
if (lngA <= lngB) {
lngE = lngB;
lngW = lngA;
} else {
lngE = lngA;
lngW = lngB;
}
var latN;
var latS;
if (latA <= latC) {
latN = latC;
latS = latA;
} else {
latN = latA;
latS = latC;
}

var nameMarker = [];
for (var i = 0; i < return_positionJsonArray.length; i++) {
if ((lngW <= return_positionJsonArray[i].longitude) && (return_positionJsonArray[i].longitude <= lngE)
&& (latS <= return_positionJsonArray[i].latitude ) && (return_positionJsonArray[i].latitude <= latN)) {

nameMarker.push(return_positionJsonArray[i].name);

}
}

kxName = unique1(nameMarker);
if(kxName.length < 1){
alert("請框選位點");
}else{
$('#win').window('open');
kuanxuanAdd(kxName);
}

});


// var overlay;
//
// overlay = overlays[i].getPath();
// var resultShape = "";
// for (var j = 0; j < overlay.length; j++) {
// var grid = overlay[j];
// resultShape += "第" + (j + 1) + "個點:" + grid.lng + "," + grid.lat + ' ';
// }


}
//傳入數組
function unique1(arr) {
var tmpArr = [];
for (var i = 0; i < arr.length; i++) {
//如果當前數組的第i已經保存進了臨時數組,那么跳過,
//否則把當前項push到臨時數組里面
if (tmpArr.indexOf(arr[i]) == -1) {
tmpArr.push(arr[i]);
}
}
return tmpArr;
}

function kuanxuanAdd(kxName) {
var name = kxName;
var divHtml = "";
for (var i = 0; i < name.length; i++) {
divHtml += "<tr>";
divHtml += "<td><span style='margin-left: 20px;'>" + (1 + i) + "</span></td>";
divHtml += "<td><span style='margin-left: 60px;'>" + name[i] + "</span></td>";
divHtml += "</tr>";
}
$("#tbody_add").html(divHtml);
}
// 框選提交
function submitForm() {
// kxName = kxName;
// debugger
// console.log(typeof(kxName));
var kxContent = $('#kxContent').val();
// alert(typeof(kxContent));
$.ajax({
// async: false,
// cache: true,
type: "POST",
url: "MapBaiduBasicServlet",
data: {
"action": "addKuangXuanContent",
"kxName": JSON.stringify(kxName),
"kxContent": kxContent
},// 你的formid
dataType: 'json',
success: function (data) {
alert(data.message);
$('#win').window('close');
drawingManagers.close();
},
error: function (data) {
alert(data.message);
drawingManagers.close();
}
});
}


//右鍵坐標
map.addEventListener("rightclick", function (e) {
if (confirm(e.point.lng + "," + e.point.lat)) {
$("shape").innerHTML = $("shape").innerHTML + " <br/>(" + e.point.lng + "," + e.point.lat + ")";
}
});

// 鼠標繪制 s

var overlays = [];
var overlaycomplete = function (e) {
overlays.push(e.overlay);
};

var styleOptions = {
strokeColor: "red", //邊線顏色。
fillColor: "red", //填充顏色。當參數為空時,圓形將沒有填充效果。
strokeWeight: 3, //邊線的寬度,以像素為單位。
strokeOpacity: 0.8, //邊線透明度,取值范圍0 - 1。
fillOpacity: 0.6, //填充的透明度,取值范圍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), //偏離值
},
circleOptions: styleOptions, //圓的樣式
polylineOptions: styleOptions, //線的樣式
polygonOptions: styleOptions, //多邊形的樣式
rectangleOptions: styleOptions //矩形的樣式
});

//添加鼠標繪制工具監聽事件,用于獲取繪制結果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);


function draw(type) {
drawingManager.open();
drawingManager.setDrawingMode(type);
}

function Editing(state) {
for (var i = 0; i < overlays.length; i++) {
state == 'enable' ? overlays[i].enableEditing() : overlays[i].disableEditing();
}
}
// 清除標記
function clearAll() {
/*for (var i = 0; i < overlays.length; i++) {
map.removeOverlay(overlays[i]);
}
overlays.length = 0
*/
map.clearOverlays(); // 清除地圖 覆蓋物
addMarker();
}
//鼠標繪制 e

//復位
function getDefault() {
drawingManager.close();
drawingManagers.close();
}

/* // 顯示框選內的點位
function reSearchWeidian() {
var showMianLay = "";
var overlay;
for (var i = 0; i < overlays.length; i++) {
overlay = overlays[i].getPath();
var resultShape = "";
for (var j = 0; j < overlay.length; j++) {
var grid = overlay[j];
resultShape += "第" + (j + 1) + "個點:" + grid.lng + "," + grid.lat + ' ';
}
}
if (overlay.length == 4) {
// alert("顯示當前矩形區域內的點");
// map.clearOverlays(); // 清除地圖 覆蓋物
var overlay = overlays[0].getPath();
var lngA = overlay[0].lng;
var latA = overlay[0].lat;
var lngB = overlay[1].lng;
var latB = overlay[1].lat;
var lngC = overlay[2].lng;
var latC = overlay[2].lat;
var lngD = overlay[3].lng;
var latD = overlay[3].lat;
//alert("lngA:"+lngA+"http://lngB"+lngB+"http:///lngC"+lngC+"http:///lngD"+lngD);
//alert("latA:"+latA+"http://latB"+latB+"http:///latC"+latC+"http:///latD"+latD);
//注意:lng 比較a 和b ,lat 比較 a 和 c ;
var lngE;
var lngW;
if (lngA <= lngB) {
lngE = lngB;
lngW = lngA;
} else {
lngE = lngA;
lngW = lngB;
}
var latN;
var latS;
if (latA <= latC) {
latN = latC;
latS = latA;
} else {
latN = latA;
latS = latC;
}
map.clearOverlays(); // 清除地圖 覆蓋物

var myIcon = new BMap.Icon("mapImg/marker/point.png", new BMap.Size(24, 36));

for (var i = 0; i < return_positionJsonArray.length; i++) {
if ((lngW <= return_positionJsonArray[i].longitude) && (return_positionJsonArray[i].longitude <= lngE)
&& (latS <= return_positionJsonArray[i].latitude ) && (return_positionJsonArray[i].latitude <= latN)) {
var points = new BMap.Point(return_positionJsonArray[i].longitude, return_positionJsonArray[i].latitude);
var markers = new BMap.Marker(points, {icon: myIcon});
map.addOverlay(markers); // 創建點位 圖標
var label = new BMap.Label(return_positionJsonArray[i].name, {offset: new BMap.Size(10, -10)});
markers.setLabel(label); // 創建點位 標注

var content = "經度:" + return_positionJsonArray[i].longitude + "<br>緯度:" + return_positionJsonArray[i].latitude;

addClickHandler(content, markers); // 創建 信息窗口
}
}
} else {
alert("請清除覆蓋物,重新畫矩形");
}
// alert(overlay.length+"http://////"+resultShape);

}*/

// 獲取面積
function getMianji() {
/* for (var i = 0; i < overlays.length; i++) {
var overlay = overlays[i].getPath();

var resultShape = "";
for (var j = 0; j < overlay.length; j++) {
var grid = overlay[j];
resultShape += "第" + (j + 1) + "個點:" + grid.lng + "," + grid.lat + ' ';
}
alert(overlay.length + '邊形' + ' ' + resultShape);
}*/

// if (overlays.length == 1) {


var showMianLay = "";
for (var i = 0; i < overlays.length; i++) {
var cemainpoint = "";
var overlay = overlays[i].getPath();

var resultShape = "";
for (var j = 0; j < overlay.length; j++) {
var grid = overlay[j];
// resultShape += "第" + (j + 1) + "個點:" + grid.lng + "," + grid.lat + ' ';

cemainpoint += "new BMap.Point(" + grid.lng + "," + grid.lat + "),";
showMianLay = grid.lng + "," + grid.lat;

}

//
}
fun(overlays.length, showMianLay, cemainpoint, '', 'green');


}


//變量名,標簽坐標,多邊形坐標,文本,邊框顏色
function fun(i, xy, arr, wb, ys) {


// map.removeOverlay();

// map.clearOverlays();

//創建經緯度數組
eval("var secRingCenter" + i + " = new BMap.Point(" + xy + ")");
eval("var secRing" + i + " = [" + arr + "]");
//創建多邊形
eval("var secRingPolygon" + i + "= new BMap.Polygon(secRing" + i + ", { strokeColor: "" + ys + "", strokeWeight: 4})");
//eval("var secRingPolygon" + i + "= new BMap.Polygon(secRing" + i + ", { FillColor:"red", strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.3 })");

//添加多邊形到地圖上
map.addOverlay(eval("secRingPolygon" + i));

var resultArea = BMapLib.GeoUtils.getPolygonArea(eval("secRingPolygon" + i)); //計算多邊形的面積(單位米)

//給多邊形添加鼠標事件
eval("secRingPolygon" + i).addEventListener("mouseover", function () {//鼠標經過時
eval("secRingPolygon" + i).setStrokeColor("red"); //多邊形邊框為紅色
//eval("secRingPolygon" + i).setFillColor(ys);
map.addOverlay(eval("secRingLabel" + i)); //添加多邊形遮照
//map.panTo(eval("secRingCenter"+i)); //將地圖移動到指定點
});
eval("secRingPolygon" + i).addEventListener("mouseout", function () {
eval("secRingPolygon" + i).setStrokeColor(ys);
//eval("secRingPolygon" + i).setFillColor("");
map.removeOverlay(eval("secRingLabel" + i));
});
/* eval("secRingPolygon" + i).addEventListener("click", function () {
map.zoomIn();
eval("secRingPolygon" + i).setStrokeColor(ys);
//eval("secRingPolygon" + i).setFillColor("");
map.setCenter(eval("secRingCenter" + i));
});*/
//創建標簽
eval("var secRingLabel" + i + "= new BMap.Label("<b>" + wb + " 面積(㎡):" + Math.floor(resultArea) + "</b>", { offset: new BMap.Size(0, 0), position: secRingCenter" + i + "})");
eval("secRingLabel" + i).setStyle({"z-index": "999999", "padding": "2px", "border": "1px solid #ccff00"});

}

//測面e

function query() {
var startime = $('#startime').datebox('getValue');
var endtime = $('#endtime').datebox('getValue');
var imsi = $('#imsi').val();
debugger
var content = "";
$.ajax({
type: "POST",
url: "MapBaiduBasicServlet",
data: {"action": "query", "startime": startime, "endtime": endtime, "imsi": imsi},
async: false,
cache: false,
error: function (request) {
// alert("Connection error");
},
success: function (data) {
console.log(typeof(data));


var weidianObj = data.plist;
var wdImsiObj = data.simlistObj;

console.dir("weidianObj==" + weidianObj);
console.dir("wdImsiObj==" + wdImsiObj);
map.clearOverlays(); // 清除地圖 覆蓋物
var myIcon = new BMap.Icon("mapImg/marker/point.png", new BMap.Size(24, 36));

for (var i = 0; i < weidianObj.length; i++) {
for (var j = 0; j < wdImsiObj.length; j++) {
if (wdImsiObj[j] != "" || wdImsiObj[j] != null) {
for (var k = 0; k < wdImsiObj[j].length; k++) {
if (weidianObj[i].number == wdImsiObj[j][k].number) {
var points = new BMap.Point(weidianObj[i].longitude, weidianObj[i].latitude);
var markers = new BMap.Marker(points, {icon: myIcon});
map.addOverlay(markers); // 創建點位 圖標
var label = new BMap.Label(weidianObj[i].name, {offset: new BMap.Size(10, -10)});
markers.setLabel(label); // 創建點位 標注

content = "經度:" + weidianObj[i].longitude + "<br>緯度:" + weidianObj[i].latitude;
// content += "經度:" + weidianObj[i].longitude + ",緯度:" + weidianObj[i].latitude + ",時間:" + wdImsiObj[j][k].datetime + "<br>";
}
}


}
}
addClickHandler(content, markers); // 創建 信息窗口

}

alert("查詢完成");
}

});


}


</script>
</body>
</html>

總結

以上是生活随笔為你收集整理的百度地图应用的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。