224 lines
8.0 KiB
HTML
224 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title></title>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
|
|
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
|
<style>
|
|
.result {
|
|
position: fixed;
|
|
bottom: 3.3em;
|
|
direction: rtl;
|
|
pointer-events: none;
|
|
overflow: auto;
|
|
}
|
|
|
|
.result>div {
|
|
direction: ltr;
|
|
}
|
|
|
|
.result .name {
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
display: inline-block;
|
|
background: #ffffffcc;
|
|
padding: 0.2em 0.5em;
|
|
border-radius: 0.5em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.result .page {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.result a.active {
|
|
background: #1e9fff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.result a {
|
|
padding: 0.3em 0.5em;
|
|
display: inline-block;
|
|
background: #ffffff;
|
|
color: #000000;
|
|
margin: 0.1em 2px;
|
|
min-width: 1.2em;
|
|
text-align: center;
|
|
border-radius: 0.3em;
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.div_edit {
|
|
position: fixed;
|
|
bottom: 0.2em;
|
|
left: 0.5em;
|
|
right: 0.5em;
|
|
display: none;
|
|
z-index: 200000;
|
|
}
|
|
|
|
#container {
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container"></div>
|
|
<div class="div_edit">
|
|
<input type="text" name="addr" placeholder="位置关键词" style="flex: 1;" onkeydown="keysearch()" />
|
|
<button class="lang btn def" onclick="search(1)" oncontextmenu="rclose()">搜索</button>
|
|
<button class="lang btn" onclick="selpos(this)">选定位置</button>
|
|
<div class="result"></div>
|
|
</div>
|
|
<script type="text/javascript" src="/jscss/jquery-1.12.4.min.js"></script>
|
|
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
|
<script type="text/javascript" src="/jscss/gcoord.js"></script>
|
|
<script type="text/javascript" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=TCEBZ-PACWI-OQCGA-5ST3L-CYEDS-OJFW4" charset="utf-8"></script>
|
|
<script type="text/javascript">
|
|
var map;
|
|
//https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview
|
|
$(document).ready(function () {
|
|
|
|
var urls = ciyfn.urlparam();
|
|
if (urls.edit) {
|
|
$('.div_edit').css('display', 'flex');
|
|
$('[name=area]').val(urls.area || ciyfn.getstorage('maploc_area'));
|
|
$('[name=addr]').val(urls.addr || '');
|
|
}
|
|
if (urls.lat == 'undefined')
|
|
urls.lat = 0;
|
|
if (urls.lng == 'undefined')
|
|
urls.lng = 0;
|
|
if (urls.lat == 0 && urls.lng == 0) {
|
|
var val = ciyfn.getstorage('_maploc');
|
|
if (val) {
|
|
urls.lng = val.lng + Math.random() * 0.001;
|
|
urls.lat = val.lat + Math.random() * 0.001;
|
|
urls.zoom = val.zoom;
|
|
} else {
|
|
urls.lng = 120;
|
|
urls.lat = 31.2;
|
|
}
|
|
}
|
|
var zoom = toint(urls.zoom);
|
|
if (zoom < 9)
|
|
zoom = 9;
|
|
var gcloc = gcoord.transform([urls.lng, urls.lat], gcoord.WGS84, gcoord.GCJ02);
|
|
var center = new TMap.LatLng(gcloc[1], gcloc[0]);
|
|
map = new TMap.Map("container", {
|
|
zoom: zoom,
|
|
center: center
|
|
});
|
|
|
|
map.marker = new TMap.MultiMarker({
|
|
id: 'marker-layer',
|
|
map: map,
|
|
styles: {
|
|
"marker": new TMap.MarkerStyle({
|
|
"width": 25,
|
|
"height": 35,
|
|
"anchor": { x: 16, y: 32 },
|
|
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
|
|
})
|
|
},
|
|
geometries: [{
|
|
"id": 'demo',
|
|
"styleId": 'marker',
|
|
"position": center,
|
|
"properties": {
|
|
"title": "marker"
|
|
}
|
|
}]
|
|
});
|
|
map.on("click", function (event) {
|
|
map.marker.updateGeometries([{
|
|
"styleId": "marker",
|
|
"id": "demo",
|
|
"position": event.latLng,
|
|
}
|
|
]);
|
|
});
|
|
});
|
|
function rclose() {
|
|
$('.result').hide(500);
|
|
return false;
|
|
}
|
|
function keysearch(ev) {
|
|
ev = ev || event;
|
|
if (ev.keyCode != 13)
|
|
return;
|
|
search(1);
|
|
}
|
|
function wheel(e) {
|
|
console.log(this, e);
|
|
|
|
}
|
|
function search(page) {
|
|
var addr = $('[name=addr]').val();
|
|
if (!addr)
|
|
return $('.result').html('');
|
|
$('.result').show();
|
|
var ctr = map.getCenter();
|
|
var pagecount = 15;
|
|
$.ajax({
|
|
url: "https://apis.map.qq.com/ws/place/v1/search?output=jsonp&callback=mapcb&page_index=" + page + "&page_size=" + pagecount + "&key=TCEBZ-PACWI-OQCGA-5ST3L-CYEDS-OJFW4&keyword=" + addr + "&boundary=nearby(" + ctr.lat + "," + ctr.lng + ",1000,1)"
|
|
, type: 'GET'
|
|
, dataType: 'jsonp'
|
|
, jsonpCallback: 'mapcb'
|
|
, success: function (ret) {
|
|
if (ret.status != 0)
|
|
return ciyfn.toast('搜索失败');
|
|
if (ret.data.length == 0)
|
|
return ciyfn.toast('无搜索结果');
|
|
var html = '';
|
|
for (var i in ret.data) {
|
|
var poi = ret.data[i];
|
|
html += '<div>';
|
|
html += '<div class="name" onclick="setmaker(this)" data-lat="' + poi.location.lat + '" data-lng="' + poi.location.lng + '" title="' + poi.address.replace(/"/g, '') + '">' + poi.title + '</div>';
|
|
//html += '<div class="addr">' + poi.address + '</div>';
|
|
html += '</div>';
|
|
}
|
|
if (ret.count > pagecount) {
|
|
var pagemax = Math.ceil(ret.count / pagecount);
|
|
html += '<div><div class="page">';
|
|
for (var i = 1; i <= pagemax; i++) {
|
|
html += '<a href="javascript:search(' + i + ')" class="' + (i == page ? 'active' : '') + '">' + i + '</a> ';
|
|
}
|
|
html += '</div></div>';
|
|
}
|
|
$('.result').html(html);
|
|
$('.result').on('mousewheel', function (e) {
|
|
var delta = event.wheelDelta;
|
|
$('.result')[0].scrollTop -= delta;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
function setmaker(dom) {
|
|
var loc = new TMap.LatLng(dom.getAttribute('data-lat'), dom.getAttribute('data-lng'));
|
|
map.marker.updateGeometries([{
|
|
"styleId": "marker",
|
|
"id": "demo",
|
|
"position": loc,
|
|
}
|
|
]);
|
|
map.panTo(loc);
|
|
}
|
|
function selpos(dom) {
|
|
var m = map.marker.geometries[0].position;
|
|
var val = { lng: m.lng, lat: m.lat, zoom: map.getZoom() };
|
|
var gcloc = gcoord.transform([val.lng, val.lat], gcoord.GCJ02, gcoord.WGS84);
|
|
val.lng = gcloc[0];
|
|
val.lat = gcloc[1];
|
|
ciyfn.setstorage('_maploc', val);
|
|
ciyfn.sendsignal(window.top,'alert_done', {btn: '选定位置', inputs: val});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |