StableVersion4.3/HL_FristAidPlatform_RealTim.../Map.html

622 lines
24 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NoZPG7j7aOh4Lb5vKgliyRIjswH8dFtR"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
<script src="Scripts/jquery-3.5.1.js"></script>
<title>地图</title>
<style type="text/css">
body, html, #allmap {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
#r-result {
position: absolute;
right: 1px;
top: 50px;
width: 300px;
height: 60%;
}
#driving_way {
position: absolute;
right: 10px;
top: 60px;
}
</style>
</head>
<body>
<div id="allmap"></div>
<div id="driving_way">
<!--地址:<input id="address_Value" type="text" />-->
<!--<input type="button" value="导航" onclick="getNavigation('112.9818150000','28.1904630000','长沙汽车西站')" />-->
</div>
<div id="r-result" hidden="hidden"></div>
</body>
</html>
<script type="text/javascript">
var m_InitialLng = 110.300175;
var m_InitialLat = 25.272718;
var address = '';
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(m_InitialLng, m_InitialLat); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.disable3DBuilding();
map.centerAndZoom(point, 15);
var myIcon = new BMap.Icon('定位.png', new BMap.Size(300, 157));
// 添加带有定位的导航控件(OK)
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: false
});
map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl(
{
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
// 定位成功事件
geolocationControl.addEventListener("locationSuccess", function (e) {
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
//alert("当前定位地址为:" + address);
});
// 定位失败事件
geolocationControl.addEventListener("locationError", function (e) {
alert(e.message);
});
map.addControl(geolocationControl);
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
//定位
var new_point;
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
new_point = new BMap.Point(r.point.lng, r.point.lat);
}
});
// 获取城市经纬度值
function getLocation(cityname) {
if (map == null) {
map = new BMap.Map("allmap"); // 创建Map实例
}
map.setCurrentCity(cityname); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
return new BMap.Point(116.404, 39.915);
}
// 鼠标点击拾取坐标
function GetPoint() {
//单击获取点击的经纬度
map.addEventListener("click", function (e) {
alert(e.point.lng + "," + e.point.lat);
});
}
// 设置地图显示的城市
function setCity(cityname) {
if (map == null) {
map = new BMap.Map("allmap"); // 创建Map实例
}
map.centerAndZoom(getLocation(cityname), 12); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity(cityname); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
}
// 设置中心点城市(OK)
function setCenterCityLocation(city) {
if (map == null) {
map = new BMap.Map("allmap"); // 创建Map实例
}
if (city != "") {
map.centerAndZoom(city, 12); // 用城市名设置地图中心点
}
}
function myFun(result) {
var cityName = result.name;
map.setCenter(cityName);
}
function getLocalCity() {
var myCity = new BMap.LocalCity();
return myCity.get(myFun);
}
//
function setLocation(lng, latitude) {
document.getElementById("longitude").value = lng;
document.getElementById("latitude").value = latitude;
showLocation();
}
// 用经纬度设置地图中心点
function showLocation() {
if (document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "") {
map.clearOverlays();
var new_point = new BMap.Point(document.getElementById("longitude").value, document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
}
}
// 用经纬度设置地图中心点实时定位2
function BD_MapDirectionShow(longitude, latitude) {
if (longitude != '' && latitude != '') {
map.clearOverlays();
translateData(longitude, latitude);
}
}
var _ambulanceNumber;
var _deviceId;
// 用经纬度设置地图中心点实时定位2new
function BD_MapDirectionShow(ambulanceNumber, deviceId, longitude, latitude) {
if (ambulanceNumber != '') {
_ambulanceNumber = ambulanceNumber;
}
if (deviceId != '') {
_deviceId = deviceId;
}
if (longitude != '' && latitude != '') {
map.clearOverlays();
translateData(longitude, latitude);
}
}
// BD_MapDirectionShowOther
function BD_MapDirectionShowOther(ambulanceNumber, deviceId, longitude, latitude) {
if (ambulanceNumber != '') {
_ambulanceNumber = ambulanceNumber;
}
if (deviceId != '') {
_deviceId = deviceId;
}
if (longitude != '' && latitude != '') {
//map.clearOverlays();
var point = new BMap.Point(longitude, latitude);
var marker = new BMap.Marker(point);
//marker.addContextMenu(markerMenu);
var label = new BMap.Label("车牌:" + ambulanceNumber, { offset: new BMap.Size(20, -10) });
map.addOverlay(marker);
marker.setLabel(label);
var sContent = "<div><a href='hkvedioshow://deviceId:" + deviceId + "/'>打开视频</a></div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
}
}
// 编写自定义函数,创建标注 -- 调用方式: addMarker(point,label);
function addMarker(point, label) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(label);
}
function panTo(lng, lat) {
var pt = new BMap.Point(lng, lat);
map.panTo(pt);
}
//添加覆盖物
function add_overlay() {
map.addOverlay(marker); //增加点
map.addOverlay(polyline); //增加折线
map.addOverlay(circle); //增加圆
map.addOverlay(polygon); //增加多边形
map.addOverlay(rectangle); //增加矩形
}
//清除覆盖物OK
function remove_overlay() {
map.clearOverlays();
}
var convertor = new BMap.Convertor();
var pointArr = [];
// 11处理偏移(OK)
function translateData(x, y) {
pointArr = [];
var ggPoint = new BMap.Point(x * 1, y * 1);
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback)
}
// 12处理偏移回调(OK)
//坐标转换完之后的回调函数
translateCallback = function (data) {
if (data.status === 0) {
var marker = new BMap.Marker(data.points[0], { titile: "3救护车" + _ambulanceNumber }); // 未启用
map.addOverlay(marker);
//map.panTo(data.points[0]);
}
}
// 定位功能的纠偏 步骤1
function translateData(x, y) {
pointArr = [];
var ggPoint = new BMap.Point(x * 1, y * 1);
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback); // 纠偏处理
}
// 定位功能的纠偏 步骤2
//坐标转换完之后的回调函数
translateCallbackOld = function (data) {
if (data.status === 0) {
var marker = new BMap.Marker(data.points[0]);
//marker.setTitle("救护车:" + _ambulanceNumber+",设备号:"+_deviceId);
var label = new BMap.Label("2车牌号" + _ambulanceNumber, { offset: new BMap.Size(20, -10) });// 未启用
marker.setLabel(label);
//var marker = new BMap.Marker(data.points[0], {titile: "车牌号:" + _ambulanceNumber+",设备号:"+_deviceId});
map.addOverlay(marker);
map.panTo(data.points[0]);
}
}
// 20171201用于单个救护车的实时监控good在用
translateCallback = function (data) {
BD_MapDirectionShow
if (data.status === 0) {
var marker = new BMap.Marker(data.points[0]);
//marker.addContextMenu(markerMenu);
var label = new BMap.Label("车牌:" + _ambulanceNumber, { offset: new BMap.Size(20, -10) });
map.addOverlay(marker);
marker.setLabel(label);
map.panTo(data.points[0]);
var sContent = "<div><a href='hkvedioshow://deviceId:" + _deviceId + " /'>打开视频</a></div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
marker.addEventListener("click", function () {
//alert('ddddd');
//$('#a').click();
this.openInfoWindow(infoWindow);
});
}
}
// 在用
function showCurve(jsonData, lng, lat) {
map.clearOverlays();
var start = jsonData;
var polyline = new BMap.Polyline(start, { strokeColor: "green", strokeWeight: 6, strokeOpacity: 0.5 });
map.addOverlay(polyline);
polyline.disableEditing(); //关闭线编辑功能
// 添加最后一个位置定位点
var marker = new BMap.Marker(new BMap.Point(parseFloat(lng), parseFloat(lat)));
map.addOverlay(marker);
//map.panTo(new BMap.Point(parseFloat(lng),parseFloat(lat)));
}
// 轨迹回放功能 提供给外部调用
function showCurve111(jsonData) {
var points = [
new BMap.Point(110.285400, 25.341431),
new BMap.Point(110.285568, 25.343287),
new BMap.Point(110.285759, 25.345022),
new BMap.Point(110.285927, 25.346359),
new BMap.Point(110.286186, 25.348286),
new BMap.Point(110.286591, 25.349947),
new BMap.Point(110.287552, 25.351511),
new BMap.Point(110.288330, 25.352711)
];
translateBatchPoints(points);
}
// 轨迹回放功能 步骤1
function showCurve222() {
var points = [
new BMap.Point(110.285400, 25.341431),
new BMap.Point(110.285568, 25.343287),
new BMap.Point(110.285759, 25.345022),
new BMap.Point(110.285927, 25.346359),
new BMap.Point(110.286186, 25.348286),
new BMap.Point(110.286591, 25.349947),
new BMap.Point(110.287552, 25.351511),
new BMap.Point(110.288330, 25.352711)
];
translateBatchPoints(points);
}
// 轨迹回放功能 步骤2
function translateBatchPoints(points) {
convertor.translate(points, 1, 5, translateBatchCallback);
}
//坐标转换完之后的回调函数 轨迹回放功能 步骤3
translateBatchCallback1 = function (data) {
var new_points = [];
if (data.status === 0) {
map.clearOverlays();
for (var i = 0; i < data.points.length; i++) {
new_points.push(data.points[i]);
var polyline = new BMap.Polyline(new_points, { strokeColor: "green", strokeWeight: 6, strokeOpacity: 0.5 }); //创建折线
map.addOverlay(polyline); //添加到地图中
//polyline.enableEditing(); // 开启线编辑功能
polyline.disableEditing(); //关闭线编辑功能
}
// 添加最后一个位置定位点
var marker = new BMap.Marker(new_points[new_points.length - 1]);
map.addOverlay(marker);
map.panTo(new_points[new_points.length - 1]);
}
}
//坐标转换完之后的回调函数 轨迹回放功能 步骤3-0
translateBatchCallback = function (data) {
var new_points = [];
if (data.status === 0) {
map.clearOverlays();
for (var i = 0; i < data.points.length; i++) {
new_points.push(data.points[i]);
var polyline = new BMap.Polyline(new_points, { strokeColor: "green", strokeWeight: 6, strokeOpacity: 0.5 }); //创建折线
map.addOverlay(polyline); // 添加到地图中
//polyline.enableEditing(); // 开启线编辑功能
polyline.disableEditing(); // 关闭线编辑功能
}
// 添加最后一个位置定位点
var marker = new BMap.Marker(new_points[new_points.length - 1]);
map.addOverlay(marker);
map.panTo(new_points[new_points.length - 1]);
}
}
// 轨迹回放功能原始
function showCurvePrimary() { // points
var points = [
new BMap.Point(110.285400, 25.341431),
new BMap.Point(110.285568, 25.343287),
new BMap.Point(110.285759, 25.345022),
new BMap.Point(110.285927, 25.346359),
new BMap.Point(110.286186, 25.348286),
new BMap.Point(110.286591, 25.349947),
new BMap.Point(110.287552, 25.351511),
new BMap.Point(110.288330, 25.352711)
];
var curve = new BMapLib.CurveLine(points, { strokeColor: "green", strokeWeight: 6, strokeOpacity: 0.5 }); //创建弧线对象
map.addOverlay(curve); //添加到地图中
curve.enableEditing(); //开启编辑功能
}
// 不使用
function curveLineCallBack(points) {
// 回调用
var curve = new BMapLib.CurveLine(points, { strokeColor: "green", strokeWeight: 6, strokeOpacity: 0.5 }); //创建弧线对象
map.addOverlay(curve); //添加到地图中
curve.enableEditing(); //开启编辑功能
}
// 滚动鼠标放大
function enableScrollWheelZoom() {
map.enableScrollWheelZoom(true);
}
//
function BD_ShowCarRun(startPointX, startPointY, endPointX, endPointY) {
//var myP1 = new BMap.Point(116.380967,39.913285); //起点
//var myP2 = new BMap.Point(116.424374,39.914668); //终点
////if(myP1 != null && myP2 != null){
//// map.clearOverly();
////}
alert("轨迹");
var myP1 = new BMap.Point(parseFloat(startPointX), parseFloat(startPointY)); //起点
var myP2 = new BMap.Point(parseFloat(endPointX), parseFloat(endPointY)); //终点
var myIcon = new BMap.Icon("定位.png", new BMap.Size(32, 70), { //小车图片
//offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var driving2 = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } }); //驾车实例
driving2.search(myP1, myP2); //显示一条公交线路
window.run = function () {
var driving = new BMap.DrivingRoute(map); //驾车实例
driving.search(myP1, myP2);
driving.setSearchCompleteCallback(function () {
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组
var paths = pts.length; //获得有几个点
var carMk = new BMap.Marker(pts[0], { icon: myIcon });
map.addOverlay(carMk);
i = 0;
function resetMkPoint(i) {
carMk.setPosition(pts[i]);
if (i < paths) {
setTimeout(function () {
i++;
resetMkPoint(i);
}, 100);
}
}
setTimeout(function () {
resetMkPoint(5);
}, 100)
});
}
setTimeout(function () {
run();
}, 1500);
}
function BD_ShowCarRuns() {
var myP1 = new BMap.Point(116.380967, 39.913285); //起点
var myP2 = new BMap.Point(116.424374, 39.914668); //终点
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片
//offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var driving2 = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } }); //驾车实例
driving2.search(myP1, myP2); //显示一条公交线路
window.run = function () {
var driving = new BMap.DrivingRoute(map); //驾车实例
driving.search(myP1, myP2);
driving.setSearchCompleteCallback(function () {
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组
var paths = pts.length; //获得有几个点
var carMk = new BMap.Marker(pts[0], { icon: myIcon });
map.addOverlay(carMk);
i = 0;
function resetMkPoint(i) {
carMk.setPosition(pts[i]);
if (i < paths) {
setTimeout(function () {
i++;
resetMkPoint(i);
}, 100);
}
}
setTimeout(function () {
resetMkPoint(5);
}, 100)
});
}
setTimeout(function () {
run();
}, 1500);
}
function ShowCurve1() {
var beijingPosition = new BMap.Point(116.432045, 39.910683),
hangzhouPosition = new BMap.Point(120.129721, 30.314429),
taiwanPosition = new BMap.Point(121.491121, 25.127053);
var points = [beijingPosition, hangzhouPosition, taiwanPosition];
var curve = new BMapLib.CurveLine(points, { strokeColor: "green", strokeWeight: 6, strokeOpacity: 0.5 }); //创建弧线对象
map.addOverlay(curve); //添加到地图中
curve.enableEditing(); //开启编辑功能
}
// 编写自定义函数,创建标注_New
function addCar(lng, lat, labelname) {
var label = new BMap.Label(labelname, { offset: new BMap.Size(20, -10) });
var point = new BMap.Point(lng, lat);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(label);
//var sContent ="<div><a href='myapp://'>open HLJW.PC.IVMS.Client</a></div>";
var sContent = "<div><a href='hkvedioshow://cid:110&username:labelname/'>打开视频</a></div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
////图片加载完毕重绘infowindow
//document.getElementById('image').onload = function (){
// infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
//}
});
}
// 编写自定义函数,创建标注_New
function addCar(lng, lat, carNumber, deviceId) {
_ambulanceNumber = carNumber;
_deviceId = deviceId;
var label = new BMap.Label(carNumber, { offset: new BMap.Size(20, -10) });
var point = new BMap.Point(lng, lat);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(label);
//var sContent ="<div><a href='myapp://'>open HLJW.PC.IVMS.Client</a></div>";
var sContent = "<div><a href='hkvedioshow://deviceId:" + _deviceId + "/'>打开视频</a></div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
////图片加载完毕重绘infowindow
//document.getElementById('image').onload = function (){
// infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
//}
});
}
// _New
function deleteCar(labelname) {
var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length - 1; i++) {
if (allOverlay[i].getLabel().content == labelname) {
map.removeOverlay(allOverlay[i]);
return false;
}
}
}
//// 百度地图API定位导航功能
// function PointPath(start,end) {
// //var map = new BMap.Map("allmap");
// map.centerAndZoom(new BMap.Point(112.98626, 28.25591), 11);
// //三种驾车策略:最少时间,最短距离,避开高速
// var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME, BMAP_DRIVING_POLICY_LEAST_DISTANCE, BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
// $("#result").click(function () {
// map.clearOverlays();
// var i = $("#driving_way select").val();
// search(start, end, routePolicy[i]);
// function search(start, end, route) {
// var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true }, policy: route });
// driving.search(start, end);
// }
// });
// }
// 百度地图API导航功能
function Navigation() {
var endAdd = $("#address_Value").val();
map.centerAndZoom(new BMap.Point(112.98626, 28.25591), 12);
var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true } });
driving.search(new_point, endAdd);
$("#r-result").show();
}
function getNavigation(stratPointX, stratPointY, endPoint) {
//alert(stratPointX + stratPointY);
var stratPoint = new BMap.Point(stratPointX, stratPointY);
map.centerAndZoom(new BMap.Point(112.98626, 28.25591), 12);
var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true } });
driving.search(stratPoint, endPoint);
//alert(endPoint);
$("#r-result").show();
}
</script>