285 lines
8.8 KiB
PHP
285 lines
8.8 KiB
PHP
<?php /*a:1:{s:74:"/www/wwwroot/app.cxhxy.dev.1nww.com/app/store/view/food/shop/getpoint.html";i:1700553054;}*/ ?>
|
||
<!DOCTYPE html>
|
||
|
||
<html>
|
||
|
||
<head>
|
||
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
||
<title>腾讯地图开放API - 轻快小巧,简单易用!</title>
|
||
|
||
<link rel="stylesheet" href="https://lbs.qq.com/tool/getpoint/common.css">
|
||
|
||
<script src="https://lbs.qq.com/tool/getpoint/jquery-1.9.1.min.js"></script>
|
||
|
||
<link rel="stylesheet" href="https://lbs.qq.com/tool/getpoint/jquery-ui.min.css">
|
||
|
||
<script src="https://lbs.qq.com/tool/getpoint/jquery-ui-1.10.4.min.js"></script>
|
||
|
||
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=<?php echo htmlentities($wxmap_key); ?>"></script>
|
||
|
||
<style type="text/css">
|
||
|
||
* {
|
||
|
||
margin: 0px;
|
||
|
||
padding: 0px;
|
||
|
||
}
|
||
|
||
|
||
|
||
#main {
|
||
|
||
height: 553px;
|
||
|
||
width: 700px;
|
||
|
||
border: 1px solid #5688CB;
|
||
|
||
border-top: 0px;
|
||
|
||
}
|
||
|
||
|
||
|
||
#tooles {
|
||
|
||
height: 23px;
|
||
|
||
background: #5688CB;
|
||
|
||
position: relative;
|
||
|
||
z-index: 100;
|
||
|
||
color: white;
|
||
|
||
}
|
||
|
||
#cur_city, #no_value {
|
||
|
||
/*height: 20px;*/
|
||
|
||
position: absolute;
|
||
|
||
top: 3px;
|
||
|
||
left: 10px;
|
||
|
||
}
|
||
|
||
|
||
|
||
#level {
|
||
|
||
margin-left: 20px;
|
||
|
||
}
|
||
|
||
|
||
|
||
.logo_img {
|
||
|
||
width: 172px;
|
||
|
||
height: 23px;
|
||
|
||
}
|
||
|
||
.poi {
|
||
|
||
width: 570px;
|
||
|
||
height: 41;
|
||
|
||
padding-top: 12px;
|
||
|
||
float: left;
|
||
|
||
position: relative;
|
||
|
||
}
|
||
|
||
|
||
|
||
.poi_note {
|
||
|
||
width: 63px;
|
||
|
||
line-height: 26px;
|
||
|
||
float: left;
|
||
|
||
}
|
||
|
||
|
||
|
||
#poi_cur {
|
||
|
||
width: 160px;
|
||
|
||
height: 22px;
|
||
|
||
margin-right: 10px;
|
||
|
||
/*margin-top: 3px;*/
|
||
|
||
line-height: 26px;
|
||
|
||
|
||
|
||
float: left;
|
||
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
|
||
|
||
#addr_cur {
|
||
|
||
width: 260px;
|
||
|
||
height: 22px;
|
||
|
||
margin-right: 5px;
|
||
|
||
/*margin-top: 3px;*/
|
||
|
||
line-height: 26px;
|
||
|
||
|
||
|
||
float: left;
|
||
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
|
||
|
||
.btn_copy {
|
||
|
||
width: 49px;
|
||
|
||
height: 24px;
|
||
|
||
/*background: url(../img/btn_cpoy.png) 0px 0px;*/
|
||
|
||
float: left;
|
||
|
||
}
|
||
|
||
|
||
|
||
.already {
|
||
|
||
width: 52px;
|
||
|
||
line-height: 26px;
|
||
|
||
padding-left: 5px;
|
||
|
||
float: left;
|
||
|
||
color: red;
|
||
|
||
display: none;
|
||
|
||
}
|
||
|
||
|
||
|
||
.info_list {
|
||
|
||
margin-bottom: 5px;
|
||
|
||
cleat: both;
|
||
|
||
cursor: pointer;
|
||
|
||
}
|
||
|
||
|
||
|
||
#txt_pannel {
|
||
|
||
height: 500px;
|
||
|
||
}
|
||
|
||
|
||
|
||
#cur_city {
|
||
|
||
margin-right: 5px;
|
||
|
||
}
|
||
|
||
|
||
|
||
#bside_rgiht {
|
||
|
||
width: 700px;
|
||
|
||
height: 530px;
|
||
|
||
font-size: 12px;
|
||
|
||
}
|
||
|
||
|
||
|
||
#container {
|
||
|
||
width: 690px;
|
||
|
||
height: 520px;
|
||
|
||
border: 5px solid #fff;
|
||
|
||
}
|
||
|
||
|
||
|
||
#no_value {
|
||
|
||
color: red;
|
||
|
||
position: relative;
|
||
|
||
width: 200px;
|
||
|
||
}
|
||
|
||
</style>
|
||
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div style="position:relative;">
|
||
|
||
<div style="height:53px;">
|
||
|
||
<div class="poi">
|
||
|
||
<div class="poi_note">当前坐标：</div>
|
||
|
||
<input type="text" id="poi_cur"/>
|
||
|
||
<div class="poi_note">当前地址：</div>
|
||
|
||
<input type="text" id="addr_cur"/>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div id="main">
|
||
|
||
<div id="tooles">
|
||
|
||
<div id="cur_city">
|
||
|
||
<strong><?php echo !empty($location['ad_info']['district']) ? htmlentities($location['ad_info']['district']) : htmlentities($location['ad_info']['city']); ?></strong>
|
||
|
||
<span id="level">当前缩放等级：15</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div id="bside_rgiht">
|
||
|
||
<div id="container"></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
|
||
|
||
|
||
var container = document.getElementById("container");
|
||
|
||
var map = new qq.maps.Map(container, {
|
||
|
||
center: new qq.maps.LatLng(<?= $location['location']['lat']?>,<?= $location['location']['lng']?>),
|
||
|
||
zoom: 15
|
||
|
||
}),
|
||
|
||
label = new qq.maps.Label({
|
||
|
||
map: map,
|
||
|
||
offset: new qq.maps.Size(15, -12),
|
||
|
||
draggable: false,
|
||
|
||
clickable: false
|
||
|
||
}),
|
||
|
||
markerArray = [],
|
||
|
||
url, query_city,
|
||
|
||
cityservice = new qq.maps.CityService({
|
||
|
||
complete: function (result) {
|
||
|
||
map.setCenter(result.detail.latLng);
|
||
|
||
}
|
||
|
||
});
|
||
|
||
cityservice.searchLocalCity();
|
||
|
||
map.setOptions({
|
||
|
||
draggableCursor: "crosshair"
|
||
|
||
});
|
||
|
||
|
||
|
||
$(container).mouseenter(function () {
|
||
|
||
label.setMap(map);
|
||
|
||
});
|
||
|
||
$(container).mouseleave(function () {
|
||
|
||
label.setMap(null);
|
||
|
||
});
|
||
|
||
|
||
|
||
qq.maps.event.addListener(map, "mousemove", function (e) {
|
||
|
||
var latlng = e.latLng;
|
||
|
||
label.setPosition(latlng);
|
||
|
||
label.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6));
|
||
|
||
});
|
||
|
||
|
||
|
||
var url3;
|
||
|
||
qq.maps.event.addListener(map, "click", function (e) {
|
||
|
||
|
||
|
||
// 设置坐标
|
||
|
||
var coordinate = e.latLng.getLat().toFixed(6) + "," + e.latLng.getLng().toFixed(6);
|
||
|
||
document.getElementById("poi_cur").value = coordinate;
|
||
|
||
parent.setCoordinate(coordinate);
|
||
|
||
|
||
|
||
url3 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + e.latLng.getLat() + "," + e.latLng.getLng() + "&key=<?php echo htmlentities($wxmap_key); ?>&output=jsonp&&callback=?");
|
||
|
||
$.getJSON(url3, function (result) {
|
||
|
||
if (result.result != undefined) {
|
||
|
||
document.getElementById("addr_cur").value = result.result.address;
|
||
|
||
} else {
|
||
|
||
document.getElementById("addr_cur").value = "";
|
||
|
||
}
|
||
|
||
})
|
||
|
||
});
|
||
|
||
|
||
|
||
qq.maps.event.addListener(map, "zoom_changed", function () {
|
||
|
||
document.getElementById("level").innerHTML = "当前缩放等级：" + map.getZoom();
|
||
|
||
});
|
||
|
||
function setAnchor(marker, flag) {
|
||
|
||
var left = marker.index * 27;
|
||
|
||
if (flag == true) {
|
||
|
||
var anchor = new qq.maps.Point(10, 30),
|
||
|
||
origin = new qq.maps.Point(left, 0),
|
||
|
||
size = new qq.maps.Size(27, 33),
|
||
|
||
icon = new qq.maps.MarkerImage("./img/marker10.png", size, origin, anchor);
|
||
|
||
marker.setIcon(icon);
|
||
|
||
} else {
|
||
|
||
var anchor = new qq.maps.Point(10, 30),
|
||
|
||
origin = new qq.maps.Point(left, 35),
|
||
|
||
size = new qq.maps.Size(27, 33),
|
||
|
||
icon = new qq.maps.MarkerImage("./img/marker10.png", size, origin, anchor);
|
||
|
||
marker.setIcon(icon);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
function setCurrent(arr, index, isMarker) {
|
||
|
||
if (isMarker) {
|
||
|
||
each(markerArray, function (n, ele) {
|
||
|
||
if (n == index) {
|
||
|
||
setAnchor(ele, false);
|
||
|
||
ele.setZIndex(10);
|
||
|
||
} else {
|
||
|
||
if (!ele.isClicked) {
|
||
|
||
setAnchor(ele, true);
|
||
|
||
ele.setZIndex(9);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
});
|
||
|
||
} else {
|
||
|
||
each(markerArray, function (n, ele) {
|
||
|
||
if (n == index) {
|
||
|
||
ele.div.style.background = "#DBE4F2";
|
||
|
||
} else {
|
||
|
||
if (!ele.div.isClicked) {
|
||
|
||
ele.div.style.background = "#fff";
|
||
|
||
}
|
||
|
||
}
|
||
|
||
});
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
function setFlagClicked(arr, index) {
|
||
|
||
each(markerArray, function (n, ele) {
|
||
|
||
if (n == index) {
|
||
|
||
ele.isClicked = true;
|
||
|
||
ele.div.isClicked = true;
|
||
|
||
var str = '<div style="width:250px;">' + ele.div.children[1].innerHTML.toString() + '</div>';
|
||
|
||
var latLng = ele.getPosition();
|
||
|
||
|
||
|
||
// 设置坐标
|
||
|
||
var coordinate = latLng.getLat().toFixed(6) + "," + latLng.getLng().toFixed(6);
|
||
|
||
document.getElementById("poi_cur").value = coordinate;
|
||
|
||
parent.setCoordinate(coordinate);
|
||
|
||
|
||
|
||
} else {
|
||
|
||
ele.isClicked = false;
|
||
|
||
ele.div.isClicked = false;
|
||
|
||
}
|
||
|
||
});
|
||
|
||
}
|
||
|
||
|
||
|
||
function each(obj, fn) {
|
||
|
||
for (var n = 0, l = obj.length; n < l; n++) {
|
||
|
||
fn.call(obj[n], n, obj[n]);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html>
|
||
|