253 lines
9.5 KiB
HTML
253 lines
9.5 KiB
HTML
|
{% extends "layout.html" %}
|
||
|
|
|
||
|
|
{% block title %}
|
||
|
|
tmap_addr_input
|
||
|
|
{% endblock %}
|
||
|
|
{% block main %}
|
||
|
|
<!-- Head section moved into body -->
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||
|
|
<title>输入提示后查询</title>
|
||
|
|
<!-- UIkit CSS -->
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/css/uikit.min.css" />
|
||
|
|
<!-- UIkit JS -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit-icons.min.js"></script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
#mapContainer {
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 400px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#tmap-container {
|
||
|
|
height: 400px; /* Adjust height as needed */
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 20px;
|
||
|
|
right: 20px;
|
||
|
|
font-size: 12px;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group .button {
|
||
|
|
height: 28px;
|
||
|
|
line-height: 28px;
|
||
|
|
background-color: #0D9BF2;
|
||
|
|
color: #FFF;
|
||
|
|
border: 0;
|
||
|
|
outline: none;
|
||
|
|
padding-left: 5px;
|
||
|
|
padding-right: 5px;
|
||
|
|
border-radius: 3px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tmap-info-content {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- 地图和搜索区域 -->
|
||
|
|
<div>
|
||
|
|
<div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
|
||
|
|
<div class="uk-width-1-3@m">
|
||
|
|
<select id="save_type" class="uk-select">
|
||
|
|
<option value="recent">最近</option>
|
||
|
|
<option value="home">住家</option>
|
||
|
|
<option value="work">工作</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="uk-width-expand@m">
|
||
|
|
<input class="uk-input" type="text" id="keyword" name="keyword"
|
||
|
|
placeholder="请输入关键字：(选定后搜索)" onfocus='this.value=""' />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<input type="hidden" id="longitude" />
|
||
|
|
<input type="hidden" id="latitude" />
|
||
|
|
<div style="height: 600px" id="container"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&key=VXYBZ-HKFR6-7WYSQ-MSZCE-ZLFAJ-33FIW"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var map, marker, infoWindow;
|
||
|
|
var searchService, geocoder;
|
||
|
|
|
||
|
|
// 初始化地图
|
||
|
|
function initMap() {
|
||
|
|
const center = new TMap.LatLng({{lat}}, {{lon}});
|
||
|
|
//初始化地图
|
||
|
|
map = new TMap.Map(document.getElementById('container'), {
|
||
|
|
center: center,
|
||
|
|
zoom: 14,
|
||
|
|
pitch: 0,
|
||
|
|
rotation: 0,
|
||
|
|
viewMode: '2D',
|
||
|
|
showControl: true
|
||
|
|
});
|
||
|
|
|
||
|
|
// 创建标记
|
||
|
|
marker = new TMap.MultiMarker({
|
||
|
|
map: map,
|
||
|
|
styles: {
|
||
|
|
"normal": new TMap.MarkerStyle({
|
||
|
|
width: 25,
|
||
|
|
height: 35,
|
||
|
|
anchor: { x: 16, y: 32 }
|
||
|
|
})
|
||
|
|
},
|
||
|
|
geometries: []
|
||
|
|
});
|
||
|
|
|
||
|
|
// 初始化信息窗口
|
||
|
|
infoWindow = new TMap.InfoWindow({
|
||
|
|
map: map,
|
||
|
|
position: center,
|
||
|
|
offset: { x: 0, y: -32 }
|
||
|
|
});
|
||
|
|
infoWindow.close();
|
||
|
|
|
||
|
|
// 创建检索服务
|
||
|
|
searchService = new TMap.service.Search({
|
||
|
|
complete: function(result) {
|
||
|
|
handleSearchResult(result);
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
alert("搜索失败，请检查关键词");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 创建地理编码服务
|
||
|
|
geocoder = new TMap.service.Geocoder();
|
||
|
|
|
||
|
|
// 绑定搜索事件
|
||
|
|
document.getElementById('keyword').addEventListener('keydown', function(e) {
|
||
|
|
if (e.keyCode === 13) {
|
||
|
|
var keyword = this.value.trim();
|
||
|
|
if (keyword) {
|
||
|
|
searchService.searchAddressDetail({
|
||
|
|
keyword: keyword,
|
||
|
|
region: '全国',
|
||
|
|
pageIndex: 1,
|
||
|
|
pageSize: 10
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 地图点击事件
|
||
|
|
map.on('click', function(evt) {
|
||
|
|
var latLng = evt.latLng;
|
||
|
|
|
||
|
|
document.getElementById('longitude').value = latLng.lng;
|
||
|
|
document.getElementById('latitude').value = latLng.lat;
|
||
|
|
|
||
|
|
// 清除现有标记
|
||
|
|
marker.setGeometries([]);
|
||
|
|
|
||
|
|
// 添加新标记
|
||
|
|
addMarker(latLng, "选定位置");
|
||
|
|
|
||
|
|
// 反向地理编码获取地址信息
|
||
|
|
geocoder.getAddress({
|
||
|
|
location: latLng
|
||
|
|
}).then(function(result) {
|
||
|
|
var address = "";
|
||
|
|
if (result.result && result.result.address) {
|
||
|
|
address = result.result.address;
|
||
|
|
}
|
||
|
|
showInfoWindow(latLng, "选定位置", address, latLng.lat, latLng.lng);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 处理搜索结果
|
||
|
|
function handleSearchResult(result) {
|
||
|
|
if (result && result.data && result.data.length > 0) {
|
||
|
|
// 清除现有标记
|
||
|
|
marker.setGeometries([]);
|
||
|
|
|
||
|
|
// 添加标记并设置地图中心
|
||
|
|
var firstResult = result.data[0];
|
||
|
|
var newLatLng = new TMap.LatLng(firstResult.location.lat, firstResult.location.lng);
|
||
|
|
|
||
|
|
for (var i = 0; i < result.data.length; i++) {
|
||
|
|
var poi = result.data[i];
|
||
|
|
var poiLatLng = new TMap.LatLng(poi.location.lat, poi.location.lng);
|
||
|
|
addMarker(poiLatLng, poi.title);
|
||
|
|
|
||
|
|
// 为标记添加点击事件
|
||
|
|
(function(p, ll) {
|
||
|
|
var markerGeometry = marker.getGeometries()[i];
|
||
|
|
marker.on('click', function(evt) {
|
||
|
|
if (evt.geometry.id === markerGeometry.id) {
|
||
|
|
showInfoWindow(ll, p.title, p.address, p.location.lat, p.location.lng);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})(poi, poiLatLng);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置地图中心为第一个结果
|
||
|
|
map.setCenter(newLatLng);
|
||
|
|
map.setZoom(15);
|
||
|
|
} else {
|
||
|
|
alert("未找到相关地点");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 添加标记
|
||
|
|
function addMarker(latLng, title) {
|
||
|
|
var markerGeometry = {
|
||
|
|
id: title + "_" + Date.now(),
|
||
|
|
styleId: 'normal',
|
||
|
|
position: latLng,
|
||
|
|
properties: {
|
||
|
|
title: title
|
||
|
|
}
|
||
|
|
};
|
||
|
|
marker.add(markerGeometry);
|
||
|
|
return markerGeometry;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 显示信息窗口
|
||
|
|
function showInfoWindow(latLng, title, address, lat, lng) {
|
||
|
|
var content = '<div class="uk-card uk-card-default uk-card-body" style="width:250px;">' +
|
||
|
|
'<h3 class="uk-card-title">' + title + '</h3>' +
|
||
|
|
'<p>' + (address || "(" + lat + ", " + lng + ")") + '</p>' +
|
||
|
|
'<div class="uk-card-footer">' +
|
||
|
|
'<form name="navForm" method="post">' +
|
||
|
|
' <input type="hidden" name="lat" value="' + lat + '">' +
|
||
|
|
' <input type="hidden" name="lon" value="' + lng + '">' +
|
||
|
|
' <input type="hidden" name="save_type" value="' + document.getElementById("save_type").value + '">' +
|
||
|
|
' <input type="hidden" name="name" value="' + title + '">' +
|
||
|
|
' <input class="uk-button uk-button-primary" type="submit" value="导航" >' +
|
||
|
|
'</form>' +
|
||
|
|
'</div>' +
|
||
|
|
'</div>';
|
||
|
|
|
||
|
|
infoWindow.setContent(content);
|
||
|
|
infoWindow.setPosition(latLng);
|
||
|
|
infoWindow.open();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 页面加载完成后初始化地图
|
||
|
|
window.onload = function() {
|
||
|
|
initMap();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|