shigongsi/public/land/landMap.html

1814 lines
77 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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%;
}
.fc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.fc:hover{
background-image: url(images/fc-hot.png);
}
.yzfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.yzfc:hover{
background-image: url(images/fc-hot.png);
}
.tzfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.tzfc:hover{
background-image: url(images/fc-hot.png);
}.sqfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.sqfc:hover{
background-image: url(images/fc-hot.png);
}.wxfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.wxfc:hover{
background-image: url(images/fc-hot.png);
}.szfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.szfc:hover{
background-image: url(images/fc-hot.png);
}.czfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.czfc:hover{
background-image: url(images/fc-hot.png);
}
.ntfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.ntfc:hover{
background-image: url(images/fc-hot.png);
}
.lygfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.lygfc:hover{
background-image: url(images/fc-hot.png);
}
.hafc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.hafc:hover{
background-image: url(images/fc-hot.png);
}
.ycfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.ycfc:hover{
background-image: url(images/fc-hot.png);
}
.xzfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.xzfc:hover{
background-image: url(images/fc-hot.png);
}
.zjfc{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/fc.png);
position:relative;
z-index:9999;
}
.zjfc:hover{
background-image: url(images/fc-hot.png);
}
/* 土地样式 */
.td{
width: 31px;
height: 36px;
display: none;
z-index: 100;
background-image: url(images/td.png);
position:relative;
z-index:9999;
}
.td:hover{
background-image: url(images/td-hot.png);
}
.wnd{
width: 297px;
height: 93px;
margin-left: -135px;
margin-top: -98px;
display: none;
z-index: 101;
background-image: url(images/wnd.png);
position:relative;
z-index:65536;
}
.txt{
width: 100%;
height: 35px;
margin-left: 0px;
margin-top: 10px;
text-align: center;
float: left;
color: white;
font-size: 12px;
font-weight: bold;
line-height: 35px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.pos{
width: 100%;
height: 20px;
margin-left: 0px;
margin-top: 0px;
text-align: center;
float: left;
color: white;
font-size: 12px;
line-height: 20px;
}
.labelBox{
/* display: inline-block; */
width: 100px;
height: 45px;
padding-left: 20px;
/* text-align: center; */
line-height: 45px;
background: url(images/box.png) no-repeat;;
background-size: 100% 100%;
color: #fff;
font-weight: 700;
}
/* .label{
color: #000;
font-weight: 700;
} */
/* 搜索框 */
.search-middle {
position: absolute;
left: 50%;
top: 180px;
width: 356px;
height: 42px;
transform: translateX(-50%);
}
.search-middle .search-container {
position: relative;
width: 100%;
height: 100%;
}
.search-middle .search-container input {
width: 100%;
height: 100%;
padding-left: 15px;
background-color: transparent;
background-image: url(images/search-input.png);
background-size: contain;
border: 0;
border-radius: 0;
font-size: 12px;
color: rgb(211, 245, 255);
}
.search-middle .search-container input:focus {
outline: none;
}
.search-middle .search-container input::-webkit-input-placeholder {
color: rgb(211, 245, 255);
}
.search-middle .search-container button {
width: 45px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-color: transparent;
background: 10px 10px url(images/search-button.png) no-repeat;
border: 0;
border-radius: 0;
text-align: center;
line-height: 30px;
cursor: pointer;
}
/* 对话框demo */
.dialogs-demo > div {
position: absolute;
width: 343px;
height: 166px;
background-image: url(images/dialog.png);
cursor: pointer;
}
.dialogs-demo > div:hover {
background-image: url(images/dialog-highlight.png);
}
.dialogs-demo > div img {
position: relative;
left: 215px;
top: -65px;
}
.dialogs-demo > div .text {
position: relative;
left: 38px;
top: -130px;
}
.dialogs-demo > div .text p:first-child {
font-weight: 700;
font-size: 16px;
color: rgb(132, 222, 231);
line-height: 45px;
}
.dialogs-demo > div .text p:last-child {
font-weight: 400;
font-size: 16px;
color: #fff;
}
.dialogs-demo > div.demo-1 {
left: 900px;
top: 312px;
}
.dialogs-demo > div.demo-2 {
left: 1100px;
top: 520px;
}
.dialogs-demo > div.demo-3 {
left: 723px;
top: 650px;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<!-- <div class="dialogs-demo">
<div class="demo-1" @click="goPage(0)">
<img src="images/building.png" alt="">
<div class="text">
<p>江苏省公司大楼</p>
<p>江苏省南京市建邺区奥体大街2号</p>
</div>
</div>
<div class="demo-2">
<img src="images/building.png" alt="">
<div class="text">
<p>江苏省公司大楼</p>
<p>江苏省南京市建邺区奥体大街2号</p>
</div>
</div>
<div class="demo-3">
<img src="images/building.png" alt="">
<div class="text">
<p>江苏省公司大楼</p>
<p>江苏省南京市建邺区奥体大街2号</p>
</div>
</div>
</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')" />
<input type="button" value="六合区" onclick="gotoPosition('lh')" />
<input type="button" value="栖霞区" onclick="gotoPosition('qx')" />
<input type="button" value="玄武区" onclick="gotoPosition('xw')" />
</div> -->
<!-- <div style="position:absolute;bottom:2rem;right:30rem;">
&nbsp;&nbsp;
<div class="labelBox">
<img src="images/fc.png" alt="" style=" vertical-align: middle;margin-right: 10px;">房产
</div>
&nbsp;&nbsp;
<div class="labelBox">
<img src="images/td.png" alt="" style=" vertical-align: middle;margin-right: 10px;">地产
</div>
</div> -->
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/socket.io.js"></script>
<!-- <script type="text/javascript" charset="utf-8">
</script> -->
<script id="mapScript">
var map = null;
// var defaultLevel = 7.5;//默认层级
// var defaultArea = "nj";
var defaultLevel = 11;//默认层级
var defaultArea = "njData";
var defaultPos = "nanjing";//默认画线的位置
var cityBoundsData = new Object();
var cityOverColor = "#ff002a";//城市鼠标经过颜色
//socket
// var socket = io('wss://111.229.30.246:18443');
var socket = io('ws://111.229.30.246:18444');
//本地socket id
var socketId = "dtfdzy";// new Date().getTime().toString();//改为自己的固定ID
//document.title = socketId;
//注册
socket.emit('register', socketId);
//接收
socket.on('receive', function (message) {
switch (message) {
case "0":
console.log("注册成功!");
break;
default:
console.log("其它消息:" + message);
break;
}
});
function send(val) {
console.log("val",val)
// var targetId = $("txtTarget").value;//目标页面socketId
// var message = $("txtMessage").value;//发给目标页面的消息内容
socket.emit('sendto', { target: 'fdzy', data: val });
}
// function $(id) {
// return document.getElementById(id);
// }
var positions = {
// "nj": { name: "南京市", lng: 119.932628, lat: 32.473465, markers: [
// { icon: "images/sgs.png", width: 200, height: 100, lng: 118.77416, lat: 32.0578, data: "省大楼" }] },
"nj": { name: "南京市", lng: 118.802997, lat: 32.066366, markers: [
{ icon: "images/floor2.png", width: 200, height: 100, lng: 118.744015, lat: 31.990507, data: "市大楼" }] },
"njData": { name: "南京市", lng: 118.802997, lat: 32.066366, markers: [
{ icon: "images/floor2.png", width: 200, height: 100, lng: 118.744015, lat: 31.990507, data: "市大楼" },] },
// "nj": { name: "南京市", lng: 118.802997, lat: 32.066366, markers: [
// { icon: "images/floor2.png", width: 200, height: 100, lng: 118.744015, lat: 31.990507, data: "市大楼" }] },
// "njData": { name: "南京市", lng: 118.802997, lat: 32.066366, markers: [
// { icon: "images/floor2.png", width: 200, height: 100, lng: 118.744015, lat: 31.990507, data: "市大楼" },
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "pk": { name: "浦口区", lng: 118.58949874899827, lat: 32.05737447444322, markers: [
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "jy": { name: "建邺区", lng: 118.71473206728729, lat: 32.01047746726674 , markers: [
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "gl": { name: "鼓楼区", lng: 118.76311325517088, lat: 32.0780463450443 , markers: [
// { icon: "images/floor2.png", width: 200, height: 100, lng: 118.744015, lat: 31.990507, data: "市大楼" } ,{ icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 , markers: [
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "qh": { name: "秦淮区", lng: 118.82082851919154, lat: 32.006870857050345 , markers: [
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "jn": { name: "江宁区", lng: 118.80566892449599, lat: 31.827523158402315 , markers: [
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 , markers: [
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 , markers: [
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "lh": { name: "六合区", lng: 118.83795657512042, lat: 32.3903835211603 , markers: [
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "qx": { name: "栖霞区", lng: 118.92919207298758, lat: 32.12803511304287 , markers: [
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] },
// "xw": { name: "玄武区", lng: 118.84821532650221, lat: 32.06267580599376 , markers: [
// { icon: "images/gc.png", width: 50, height: 20, lng: 118.976972, lat: 31.322781, data: "gc" },
// { icon: "images/gl.png", width: 50, height: 20, lng: 118.76311325517088, lat: 32.0780463450443, data: "gl" },
// { icon: "images/jy.png", width: 50, height: 20, lng: 118.71473206728729, lat: 32.01047746726674, data: "jy" },
// { icon: "images/jn.png", width: 50, height: 20, lng: 118.80566892449599, lat: 31.827523158402315, data: "jn" },
// { icon: "images/ls.png", width: 50, height: 20, lng: 119.057397, lat: 31.574872, data: "ls" },
// { icon: "images/lh.png", width: 50, height: 20, lng: 118.83795657512042, lat: 32.3903835211603, data: "lh" },
// { icon: "images/pk.png", width: 50, height: 20, lng: 118.58949874899827, lat: 32.05737447444322, data: "pk" },
// { icon: "images/qx.png", width: 50, height: 20, lng: 118.92919207298758, lat: 32.12803511304287, data: "qx" },
// { icon: "images/qh.png", width: 50, height: 20, lng: 118.82082851919154, lat: 32.006870857050345, data: "qh" },
// { icon: "images/xw.png", width: 50, height: 20, lng: 118.84821532650221, lat: 32.06267580599376, data: "xw" },
// { icon: "images/yh.png", width: 50, height: 20, lng: 118.683091, lat:31.941923, data: "yh" }] }
}
var layers = {}
var mapType = {
stardand: "aegis://styles/aegis/Streets",//标准
formated: "aegis://styles/aegis/Streets-Raster512",//栅格
pictures: "aegis://styles/aegis/Satellite512"//卫星
}
var njfc = []
// 申请的key和sn
SGMap.tokenTask
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
.then(function () {
initMap();
});
function initMap() {
var area = GetQueryString("area");
console.log("defaultArea",defaultArea)
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: mapType.stardand,
// 默认缩放层级
zoom: defaultLevel,
// 地图中心点
center: [lng, lat],
//倾斜角度
pitch: 55,
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei"
});
MapFill();
loadMarkers(defaultArea);
//reportLocation();
};
function initMap1() {
var area = GetQueryString("area");
// console.log("defaultArea",defaultArea)
defaultArea="njData"
loadMarkers(defaultArea);
};
function MapFill() {
SGMap.plugin(['SGMap.DistrictTask']).then(function (res) {
var districtTask = new SGMap.DistrictTask()
loadFC();
loadTD();
districtTask
.searchDistrict({
keyword: '南京市',
// keyword: '江苏省', // 必填项,检索关键字,或者是行政区划编码
subdistrict: 2, // 选填项设置显示下级行政区级数0不返回下级行政区 1返回下一级行政区 2返回下两级行政区 3返回下三级行政区
extension: true, // 是否返回行政区边界坐标点
})
.then(function (result) {
$.get("data/map/js.json", function (res) {
console.log(res);
layers.jiangsu = new Object();
layers.jiangsu.line = createLine("jiangsu", res.jiangsu, '#3787ff', 2).id;
layers.jiangsu.polygon = createPolygon("jiangsu", res.jiangsu, '#3787ff', 0.1).id;
createCities("nanjing",res.nanjing);
// createCities("zhenjiang",res.zhenjiang);
// createCities("suzhou",res.suzhou);
// createCities("changzhou",res.changzhou);
// createCities("wuxi",res.wuxi);
// createCities("nantong",res.nantong);
// createCities("taizhou",res.taizhou);
// createCities("yangzhou",res.yangzhou);
// createCities("yancheng",res.yancheng);
// createCities("huaian",res.huaian);
// createCities("suqian",res.suqian);
// createCities("lianyungang",res.lianyungang);
// createCities("xuzhou",res.xuzhou);
});
});
});
}
//画线
function createLine(name, data, color, lineWidth) {
var id = "l-" + name;
clearLayer(id);
var line = map.addLayer({
"id": id,
'type': 'line',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': data
}
}]
}
}, 'paint': {
'line-color': color,
'line-width': lineWidth
}
});
line.id = id;
return line;
}
//填充
function createPolygon(name, data, color, opacity) {
var id = "p-" + name;
clearLayer(id);
var polygon = map.addLayer({
"id": id,
'type': 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [data]
}
}]
}
},
'paint': {
'fill-color': color, // 默认值为黑色#000
'fill-opacity': opacity
}
});
polygon.id = id;
return polygon;
}
function createCities(cityName, cityData) {
visibleTD()
var hidePolygon = createPolygon("hide" + cityName, cityData, "#000000", 0);
createPolygon("show" + cityName, cityData, cityOverColor, 0.1);
createLine("show" + cityName, cityData, cityOverColor, 1);
// map.on('mouseover', hidePolygon.id, function (ev) {
// createPolygon("show" + cityName, cityData, cityOverColor, 0.1);
// createLine("show" + cityName, cityData, cityOverColor, 1);
// });
// map.on('mouseleave', hidePolygon.id, function (ev) {
// clearLayer("p-show" + cityName);
// clearLayer("l-show" + cityName);
// });
// map.on('click', hidePolygon.id, function (ev) {
// console.log("1111",cityData[0],cityName)
// map.easeTo({ center: [cityData[100][0], cityData[100][1]], zoom: getMapZoom1() });
// });
}
//清楚层
function clearLayer(layerId) {
if (map.getLayer(layerId) != undefined) {
map.removeLayer(layerId);
map.removeSource(layerId);
}
}
//获取地图层级
function getMapZoom() {
// console.log("getZoom",map.getZoom())
return map.getZoom()+2;
}
//获取地图层级
function getMapZoom1() {
// console.log("getZoom",map.getZoom())
// return map.getZoom();
return 10;
}
//设置地图层级
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);
clearLayer("l-" + defaultPos);//移除上一层区域
clearLayer("p-" + defaultPos);//移除上一层区域
defaultPos = posName;//设置为当前区域
createLine(posName, positions[posName].data, '#00d91f', 2);//为当前区域画线
createPolygon(posName, positions[posName].data, '#00d91f', 0.2);//为当前区域填充
}
//画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会默认给一个蓝色水滴图标
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);
window.parent['vueDefinedMyProp']('build')
// gotoPosition(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));
}
}
}
function loadFC() {
$.get("data/fc.json", function (res) {
for (var i in res) {
if(res[i].city=='南京市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","fc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省南京市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='扬州市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","yzfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省扬州市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='镇江市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","zjfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省镇江市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='泰州市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","tzfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省泰州市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='宿迁市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","sqfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省宿迁市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='无锡市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","wxfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省无锡市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='苏州市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","szfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省苏州市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='常州市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","czfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省常州市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='南通市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","ntfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省南通市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='连云港市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","lygfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省连云港市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='淮安市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","hafc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省淮安市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='盐城市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","ycfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省盐城市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}else if(res[i].city=='徐州市'){
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","xzfc");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省徐州市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.tudi+")");
$(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
/////////////////////////////////自定义输出内容//////////////////////////////////////
// console.log("场景跳转@",e.target.cusData);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
/////////////////////////////////自定义输出内容//////////////////////////////////////
//console.log("场景跳转@" + e.target.cusData);
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [0, 0]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}
}
});
}
//基地数据
function loadTD() {
$.get("data/jd.json", function (res) {
console.log("res",res)
for (var i in res) {
var row = res[i];
var lng = parseFloat(row.position.substring(0, row.position.indexOf(',')));
var lat = parseFloat(row.position.substr(row.position.indexOf(',') + 1));
// console.log(lng, lat);
if (lng != NaN && lat != NaN && lng > 100 && lat < 100) {
//画marker点
var el = document.createElement("div");
el.className = "marker";
el.cusData = row;
el.lng = lng;
el.lat = lat;
el.setAttribute("class","td");
var tip = document.createElement("div");
tip.setAttribute("class","wnd");
el.appendChild(tip);
el.tip = tip;
var txt = document.createElement("div");
txt.innerText = "龙园西路113号枫亚湾5幢701";
txt.setAttribute("class","txt");
tip.appendChild(txt);
tip.txt = txt;
var pos = document.createElement("div");
pos.innerText = "江苏省南京市";
pos.setAttribute("class","pos");
tip.appendChild(pos);
tip.pos = pos;
el.addEventListener("mouseover", function (e) {
$(e.target.tip).show();//(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
$(e.target.tip.txt).html(e.target.cusData.tudi);
$(e.target.tip.pos).html(e.target.cusData.jd);
// $(e.target.tip.txt).html(e.target.cusData.street+"("+e.target.cusData.zongdi+")");
// $(e.target.tip.pos).html(e.target.cusData.province+e.target.cusData.city+e.target.cusData.area+e.target.cusData.street);
});
el.addEventListener("mouseleave", function (e) {
$(e.target.tip).hide();
});
el.addEventListener("click", function (e) {
});
// 如果不传el会默认给一个蓝色水滴图标
var mk = new SGMap.Marker(el, {
// marker相对经纬度点坐标点的位置
anchor: "bottom",
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
offset: [-15.5, -18]
});
mk.setLngLat([lng, lat]);
mk.addTo(map);
}
}
});
}
function visibleFC(val){
// if(val)
// $(".fc").show();
// else
// $(".fc").hide();
if(val=='nanjing'){
$(".fc").show();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").hide();
}else if(val=='yangzhou'){
$(".fc").hide();
$(".yzfc").show();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").hide();
}else if(val=='huaian'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").show();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").hide();
}else if(val=='taizhou'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").show();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").hide();
}else if(val=='changzhou'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").show();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").hide();
}else if(val=='wuxi'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").show();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").hide();
}else if(val=='xuzhou'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").show();
$(".zjfc").hide();
}else if(val=='nantong'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").show();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").hide();
}else if(val=='suzhou'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").show();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").hide();
}else if(val=='zhenjiang'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").show();
}else if(val=='suqian'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").show();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").hide();
}else if(val=='yancheng'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").hide();
$(".hafc").hide();
$(".ycfc").show();
$(".xzfc").hide();
$(".zjfc").hide();
}else if(val=='lianyungang'){
$(".fc").hide();
$(".yzfc").hide();
$(".tzfc").hide();
$(".sqfc").hide();
$(".wxfc").hide();
$(".szfc").hide();
$(".czfc").hide();
$(".ntfc").hide();
$(".lygfc").show();
$(".hafc").hide();
$(".ycfc").hide();
$(".xzfc").hide();
$(".zjfc").hide();
}
}
function visibleTD(val){
$(".td").show();
// if(val)
// $(".td").show();
// else
// $(".td").hide();
}
/*
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>