268 lines
9.5 KiB
HTML
268 lines
9.5 KiB
HTML
<!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" />
|
||
|
||
<title>思极地图</title>
|
||
<style>
|
||
html,
|
||
body {
|
||
padding: 0;
|
||
margin: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
#car01{
|
||
width: 650px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 70%;
|
||
background: #789cd1;
|
||
opacity: 0.9;
|
||
color: #fff;
|
||
display: none;
|
||
font-size: 14px;
|
||
}
|
||
#car02{
|
||
width: 553px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
position: absolute;
|
||
left: 30%;
|
||
top: 65%;
|
||
position: absolute;
|
||
background: #789cd1;
|
||
opacity: 0.9;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
display:none
|
||
}
|
||
#car03{
|
||
width: 553px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
position: absolute;
|
||
position: absolute;
|
||
left: 14%;
|
||
top: 36%;
|
||
background: #789cd1;
|
||
opacity: 0.9;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
display:none
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="map" style="width: 100%; height: 100%;"></div>
|
||
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
||
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
||
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
||
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
||
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
||
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
||
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
||
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
||
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
||
</div> -->
|
||
<div id="car01">
|
||
南京邮电大学三牌楼校区→东南大学丁家桥校区→江苏华侨大厦→星汉城市花园→江苏省应急服务中心
|
||
</div>
|
||
<div id="car02">
|
||
南京市民防局→环亚凯瑟琳广场→东南大学附属中学→鼓楼医院(北院)→江苏议事园酒店
|
||
</div>
|
||
<div id="car03">
|
||
天目大厦→中英文化协会旧址→苏州路18号院→江苏省高级人民法院→江苏省司法厅
|
||
</div>
|
||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||
<script id="mapScript">
|
||
var map = null;
|
||
var defaultLevel = 16;//默认层级
|
||
var defaultArea = "nj";
|
||
|
||
var positions = {
|
||
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "travelImages/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "travelImages/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
|
||
// "nj":{ "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.863004, lat: 31.970233, data: "车辆1" },{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.766418, lat: 31.980525, data: "车辆2" },{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.665233, lat: 32.082888, data: "车辆3" }] },
|
||
"nj":{ "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "travelImages/icon.png", lng: 118.863004, lat: 31.970233, data: "车辆1" },{ icon: "travelImages/icon.png",lng: 118.766418, lat: 31.980525, data: "车辆2" },{ icon: "travelImages/icon.png", lng: 118.665233, lat: 32.082888, data: "车辆3" }] },
|
||
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
|
||
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
||
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
||
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
||
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
||
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
||
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
||
}
|
||
|
||
// 申请的key和sn
|
||
SGMap.tokenTask
|
||
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
||
.then(function () {
|
||
initMap();
|
||
});
|
||
|
||
function initMap() {
|
||
var area = GetQueryString("area");
|
||
var lng = positions[defaultArea].lng;
|
||
var lat = positions[defaultArea].lat;
|
||
if (area != null) {
|
||
defaultArea = area;
|
||
lng = positions[defaultArea].lng;
|
||
lat = positions[defaultArea].lat;
|
||
}
|
||
|
||
map = new SGMap.Map({
|
||
// 地图绑定的DOM元素ID
|
||
container: "map",
|
||
// 地图样式
|
||
style: "aegis://styles/aegis/Streets",
|
||
// style: "aegis://styles/aegis/Satellite512",
|
||
// 默认缩放层级
|
||
zoom: 11,
|
||
// 地图中心点
|
||
center: [lng, lat],
|
||
//倾斜角度
|
||
pitch: 45,
|
||
// 地图默认字体
|
||
localIdeographFontFamily: "Microsoft YoHei"
|
||
});
|
||
|
||
loadMarkers(defaultArea);
|
||
reportLocation();
|
||
}
|
||
|
||
//获取地图层级
|
||
function getMapZoom() {
|
||
return map.getZoom();
|
||
}
|
||
|
||
//设置地图层级
|
||
function setMapZoom(n) {
|
||
if (!isNaN(n) && n >= 0 && n <= 20)
|
||
map.setZoom(n);
|
||
}
|
||
|
||
//设置地图中心
|
||
function setMapCenter(lat, lng) {
|
||
map.setCenter([lng, lat]);
|
||
}
|
||
|
||
//获取地图当前中心点坐标
|
||
function getMapCenter() {
|
||
return map.getCenter();
|
||
}
|
||
|
||
//每秒汇报当前中心点坐标
|
||
function reportLocation() {
|
||
var centerPoint = getMapCenter();
|
||
console.log(centerPoint);
|
||
window.setTimeout("reportLocation()", 1000);
|
||
}
|
||
|
||
//地点跳转
|
||
function gotoPosition(posName) {
|
||
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
||
loadMarkers(posName);
|
||
}
|
||
|
||
//画marker点
|
||
function addMarker(markerData) {
|
||
var el = document.createElement("img");
|
||
el.cusData = markerData;
|
||
el.className = "marker";
|
||
// 自定义图标
|
||
el.src = markerData.icon;
|
||
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||
// el.style.width = markerData.width == undefined ? "120px" : markerData.width + "px";
|
||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||
// 如果不传el，会默认给一个蓝色水滴图标
|
||
var mk = new SGMap.Marker(el, {
|
||
// marker相对经纬度点坐标点的位置
|
||
anchor: "bottom",
|
||
// 相对于元素中心点，偏移的像素距离，负数代表向左和向上
|
||
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
||
});
|
||
mk.setLngLat([markerData.lng, markerData.lat]);
|
||
mk.addTo(map);
|
||
el.addEventListener("click", function (e) {
|
||
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
||
console.log("跳转" + e.target.cusData.data);
|
||
if(e.currentTarget.cusData.data=='车辆1'){
|
||
document.querySelector('#car01').style.display = 'block';
|
||
document.querySelector('#car02').style.display = 'none';
|
||
document.querySelector('#car03').style.display = 'none';
|
||
}else if(e.currentTarget.cusData.data=='车辆2'){
|
||
document.querySelector('#car01').style.display = 'none';
|
||
document.querySelector('#car02').style.display = 'block';
|
||
document.querySelector('#car03').style.display = 'none';
|
||
}else if(e.currentTarget.cusData.data=='车辆3'){
|
||
document.querySelector('#car01').style.display = 'none';
|
||
document.querySelector('#car02').style.display = 'none';
|
||
document.querySelector('#car03').style.display = 'block';
|
||
}
|
||
});
|
||
|
||
return mk;
|
||
}
|
||
|
||
//加载图标
|
||
var markerArray = new Array();
|
||
function loadMarkers(posName) {
|
||
for (var i in markerArray) {
|
||
markerArray[i].remove();
|
||
}
|
||
markerArray = new Array();
|
||
|
||
var markers = positions[posName].markers;
|
||
if (markers != undefined && markers != null) {
|
||
for (var i in markers) {
|
||
var markerData = markers[i];
|
||
markerArray.push(addMarker(markerData));
|
||
}
|
||
}
|
||
}
|
||
|
||
/*
|
||
1.获取2个经纬度之间的距离
|
||
2.lng1 lat1 经纬度1
|
||
3.lng2 lat2 经纬度2
|
||
*/
|
||
function getDisance(lng1, lat1, lng2, lat2) {
|
||
var dis = 0;
|
||
var radius = 6378137;//地球的半径
|
||
var radLat1 = toRad(lat1);
|
||
var radLat2 = toRad(lat2);
|
||
var deltaLat = radLat1 - radLat2;
|
||
var deltaLng = toRad(lng1) - toRad(lng2);
|
||
var dis =
|
||
2 *
|
||
Math.asin(
|
||
Math.sqrt(
|
||
Math.pow(Math.sin(deltaLat / 2), 2) +
|
||
Math.cos(radLat1) *
|
||
Math.cos(radLat2) *
|
||
Math.pow(Math.sin(deltaLng / 2), 2)
|
||
)
|
||
);
|
||
|
||
return dis * radius;
|
||
}
|
||
|
||
//获取URL参数
|
||
function GetQueryString(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||
var r = window.location.search.substr(1).match(reg);
|
||
if (r != null) return unescape(r[2]); return null;
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |