设置地图
This commit is contained in:
徐克
parent
7c0907d554
commit
a8a8603788
Binary file not shown.
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"companyName": "LGZN",
|
||||
"productName": "JianPuBuilding",
|
||||
"productVersion": "0.1",
|
||||
"dataUrl": "JianPu_Building.data.unityweb",
|
||||
"wasmCodeUrl": "JianPu_Building.wasm.code.unityweb",
|
||||
"wasmFrameworkUrl": "JianPu_Building.wasm.framework.unityweb",
|
||||
"graphicsAPI": ["WebGL 2.0","WebGL 1.0"],
|
||||
"webglContextAttributes": {"preserveDrawingBuffer": false},
|
||||
"splashScreenStyle": "Dark",
|
||||
"backgroundColor": "#231F20",
|
||||
"cacheControl": {"default": "must-revalidate"},
|
||||
"developmentBuild": false,
|
||||
"multithreading": false,
|
||||
"unityVersion": "2019.4.0f1"
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,24 @@
|
|||
function UnityProgress(unityInstance, progress) {
|
||||
if (!unityInstance.Module)
|
||||
return;
|
||||
if (!unityInstance.logo) {
|
||||
unityInstance.logo = document.createElement("div");
|
||||
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
|
||||
unityInstance.container.appendChild(unityInstance.logo);
|
||||
}
|
||||
if (!unityInstance.progress) {
|
||||
unityInstance.progress = document.createElement("div");
|
||||
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
|
||||
unityInstance.progress.empty = document.createElement("div");
|
||||
unityInstance.progress.empty.className = "empty";
|
||||
unityInstance.progress.appendChild(unityInstance.progress.empty);
|
||||
unityInstance.progress.full = document.createElement("div");
|
||||
unityInstance.progress.full.className = "full";
|
||||
unityInstance.progress.appendChild(unityInstance.progress.full);
|
||||
unityInstance.container.appendChild(unityInstance.progress);
|
||||
}
|
||||
unityInstance.progress.full.style.width = (100 * progress) + "%";
|
||||
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
|
||||
if (progress == 1)
|
||||
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 345 B |
Binary file not shown.
|
After Width: | Height: | Size: 155 B |
Binary file not shown.
|
After Width: | Height: | Size: 159 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 142 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
.webgl-content * {border: 0; margin: 0; padding: 0}
|
||||
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
|
||||
|
||||
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
|
||||
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
|
||||
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
|
||||
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
|
||||
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
|
||||
|
||||
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
|
||||
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
|
||||
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
|
||||
|
||||
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
|
||||
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
|
||||
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
|
||||
.webgl-content .footer .title {margin-right: 10px; float: right;}
|
||||
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
|
||||
.webgl-content .back {background-image: url('shouye.png'); width: 38px; height: 38px; float: right;}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Unity WebGL Player | JianPuBuilding</title>
|
||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
<script src="TemplateData/UnityProgress.js"></script>
|
||||
<script src="Build/UnityLoader.js"></script>
|
||||
<script>
|
||||
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/JianPu_Building.json", {onProgress: UnityProgress});
|
||||
// function init() {
|
||||
// unityInstance.SetFullscreen(1)
|
||||
// }
|
||||
function home() {
|
||||
window.history.go(-1);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<style>
|
||||
html body {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.back{
|
||||
bottom: 20px;
|
||||
right: 50px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
.home{
|
||||
background: #ffffff;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 50px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius:5px
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<!-- <div class="webgl-content">-->
|
||||
<!-- <div id="unityContainer" style="width: 960px; height: 600px"></div>-->
|
||||
<!-- <div class="footer">-->
|
||||
<!-- <div class="webgl-logo"></div>-->
|
||||
<!-- <div class="fullscreen" onclick="init()" style="cursor: pointer"></div>-->
|
||||
<!-- <div class="back" onclick="home()" style="cursor: pointer"></div>-->
|
||||
<!-- <div class="title">JianPuBuilding</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div style="width: 100%; height:100%" class="webgl-content">
|
||||
<!-- <div id="unityContainer" style="width: 960px; height: 600px"></div> -->
|
||||
<div id="unityContainer" style="width: 100vw; height: 100vh;overflow: hidden;" ></div>
|
||||
<div class="home">
|
||||
<div class="back" onclick="home()" style="cursor: pointer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".unityweb" mimeType="application / unityweb" /> </staticContent> </system.webServer> </configuration>
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<!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%;
|
||||
}
|
||||
</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> -->
|
||||
<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: "images/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "images/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
|
||||
// "nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "images/shengfloor.png",w:330,h:230, lng:118.82276, lat:32.095614, data: "省公司大楼" },{ icon: "images/1.png",w:300,h:200, lng: 118.816436, lat: 32.038332, data: "供应商1" },{ icon: "images/2.png",w:300,h:200, lng: 118.730198, lat: 32.022659, data: "供应商2" },{ icon: "images/3.png",w:300,h:200, lng: 118.895199, lat: 32.13427, data: "供应商3" }] },
|
||||
"nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "images/shengfloor.png", lng: 118.773886, lat:32.058391, data: "省公司大楼" },{ icon: "images/1.png",lng: 118.816436, lat: 32.038332, data: "供应商1" },{ icon: "images/2.png",lng: 118.730198, lat: 32.022659, data: "供应商2" },{ icon: "images/3.png",lng: 118.895199, lat: 32.13427, 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/Satellite512",
|
||||
style: "aegis://styles/aegis/Streets",
|
||||
// 默认缩放层级
|
||||
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 ? "260px" : markerData.width + "px";
|
||||
// el.style.height = markerData.height == undefined ? "200px" : 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);
|
||||
});
|
||||
|
||||
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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
|
|
@ -0,0 +1,202 @@
|
|||
<!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%;
|
||||
}
|
||||
</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> -->
|
||||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||||
<script id="mapScript">
|
||||
var map = null;
|
||||
var defaultLevel = 5;//默认层级
|
||||
var defaultArea = "nj";
|
||||
|
||||
var positions = {
|
||||
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "greenImages/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "greenImages/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
|
||||
// "nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "greenImages/shengfloor.png",w:330,h:230, lng: 118.85244, lat:32.11629, data: "江苏省公司大楼" },{ icon: "greenImages/floor2.png",w:330,h:230, lng: 118.647195, lat: 32.039924, data: "南京市公司大楼" },{ icon: "greenImages/floor3.png",w:330,h:230, lng: 119.02204, lat: 32.10846, data: "客服中心公司大楼" },] },
|
||||
"nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "greenImages/shengfloor.png",w:330,h:230, lng: 118.773886, lat:32.058391, data: "江苏省公司大楼" },] },
|
||||
"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 ? "260px" : markerData.width + "px";
|
||||
el.style.height = markerData.height == undefined ? "150px" : 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);
|
||||
});
|
||||
|
||||
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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,268 @@
|
|||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -0,0 +1,202 @@
|
|||
<!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%;
|
||||
}
|
||||
</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> -->
|
||||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||||
<script id="mapScript">
|
||||
var map = null;
|
||||
var defaultLevel = 5;//默认层级
|
||||
var defaultArea = "nj";
|
||||
|
||||
var positions = {
|
||||
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "images/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "images/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
|
||||
// "nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",w:300,h:200, lng: 118.77256, lat:32.060982, data: "北阴阳营小区" },{ icon: "images/sads.png",w:300,h:200, lng: 118.77327, lat: 32.05902, data: "苏安大厦" }] },
|
||||
// "nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",lng: 118.77256, lat:32.060982, data: "北阴阳营小区" },{ icon: "images/sads.png", lng: 118.77327, lat: 32.05902, data: "苏安大厦" }] },
|
||||
"nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",lng: 118.77256, lat:32.060982, data: "北阴阳营小区" }] },
|
||||
"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",
|
||||
// 默认缩放层级
|
||||
zoom: 16,
|
||||
// 地图中心点
|
||||
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 ? "260px" : markerData.width + "px";
|
||||
// el.style.height = markerData.height == undefined ? "150px" : 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);
|
||||
});
|
||||
|
||||
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>
|
||||
Loading…
Reference in New Issue