216 lines
6.9 KiB
HTML
216 lines
6.9 KiB
HTML
|
{% extends "layout.html" %}
|
||
|
|
|
||
|
|
{% block title %}
|
||
|
|
amap_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>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
window._AMapSecurityConfig = {
|
||
|
|
securityJsCode:'{{amap_key_2}}',
|
||
|
|
}
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
|
||
|
|
#amap-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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.amap-info-content {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="https://webapi.amap.com/maps?v=1.4.2&key={{amap_key}}"></script>
|
||
|
|
|
||
|
|
<!-- Rest of the HTML body content -->
|
||
|
|
<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>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var windowsArr = [];
|
||
|
|
var markers = [];
|
||
|
|
var map = new AMap.Map("container", {
|
||
|
|
resizeEnable: true,
|
||
|
|
center: [{{lat}}, {{lon}}], //地图中心点
|
||
|
|
zoom: 13, //地图显示的缩放级别
|
||
|
|
keyboardEnable: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
var infoWindow;
|
||
|
|
function openInfo(name, addr, lng, lat) {
|
||
|
|
//构建信息窗体中显示的内容
|
||
|
|
var info = [];
|
||
|
|
info.push('<div class="uk-card uk-card-default uk-card-body">');
|
||
|
|
info.push('<a class="uk-card-badge uk-label" onClick="javascript:infoWindow.close()" uk-close></a>');
|
||
|
|
info.push("<h3 style=\"padding-top: 10px;\" class=\"uk-card-title\">" + name + "</h3>");
|
||
|
|
info.push("<p>" + addr + "</p>");
|
||
|
|
info.push('<div class="uk-card-footer">');
|
||
|
|
info.push('<form name="navForm" method="post">');
|
||
|
|
info.push(' <input type="hidden" name="lat" value="' + lat + '">');
|
||
|
|
info.push(' <input type="hidden" name="lon" value="' + lng + '">');
|
||
|
|
info.push(' <input type="hidden" name="save_type" value="' + document.getElementById("save_type").value + '">');
|
||
|
|
info.push(' <input type="hidden" name="name" value="' + name + '">');
|
||
|
|
info.push(' <input class="uk-button uk-button-primary" type="submit" value="导航" >');
|
||
|
|
info.push('</form>');
|
||
|
|
info.push('</div>');
|
||
|
|
info.push("</div>");
|
||
|
|
|
||
|
|
var pos = new AMap.LngLat(lng, lat)
|
||
|
|
infoWindow = new AMap.InfoWindow({
|
||
|
|
position: pos,
|
||
|
|
isCustom: true,
|
||
|
|
offset: new AMap.Pixel(0, -30),
|
||
|
|
content: info.join(""), //使用默认信息窗体框样式，显示信息内容
|
||
|
|
});
|
||
|
|
|
||
|
|
infoWindow.open(map, pos);
|
||
|
|
}
|
||
|
|
AMap.plugin(["AMap.Autocomplete", "AMap.PlaceSearch"], function () {
|
||
|
|
var autoOptions = {
|
||
|
|
city: "全国", //城市，默认全国
|
||
|
|
input: "keyword", //使用联想输入的input的id
|
||
|
|
};
|
||
|
|
autocomplete = new AMap.Autocomplete(autoOptions);
|
||
|
|
var placeSearch = new AMap.PlaceSearch({
|
||
|
|
map: "",
|
||
|
|
});
|
||
|
|
AMap.event.addListener(autocomplete, "select", function (e) {
|
||
|
|
//TODO 针对选中的poi实现自己的功能
|
||
|
|
//重寫搜尋點及其提示資訊begin=====
|
||
|
|
placeSearch.setCity(e.poi.adcode);
|
||
|
|
if (e.poi && e.poi.location) {
|
||
|
|
map.setZoom(17);
|
||
|
|
map.setCenter(e.poi.location);
|
||
|
|
}
|
||
|
|
placeSearch.search(e.poi.name, check_dest); //關鍵字查詢查詢
|
||
|
|
|
||
|
|
function check_dest(status, result) {
|
||
|
|
if (status === "complete" && result.info === "OK") {
|
||
|
|
for (var h = 0; h < result.poiList.pois.length; h++) {
|
||
|
|
//返回搜尋列表迴圈繫結marker
|
||
|
|
var jy = result.poiList.pois[h]["location"]; //經緯度
|
||
|
|
var name = result.poiList.pois[h]["name"]; //地址
|
||
|
|
marker = new AMap.Marker({
|
||
|
|
//加點
|
||
|
|
map: map,
|
||
|
|
position: jy,
|
||
|
|
});
|
||
|
|
marker.extData = {
|
||
|
|
getLng: jy["lng"],
|
||
|
|
getLat: jy["lat"],
|
||
|
|
name: name,
|
||
|
|
address: result.poiList.pois[h]["address"],
|
||
|
|
}; //自定義想傳入的引數
|
||
|
|
|
||
|
|
marker.on("click", function (e) {
|
||
|
|
var hs = e.target.extData;
|
||
|
|
var content = openInfo(
|
||
|
|
hs["name"],
|
||
|
|
hs["address"],
|
||
|
|
hs["getLng"],
|
||
|
|
hs["getLat"]
|
||
|
|
);
|
||
|
|
});
|
||
|
|
markers.push(marker);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//重寫搜尋點及其提示資訊end=====
|
||
|
|
});
|
||
|
|
});
|
||
|
|
var clickEventListener = map.on('click', function(e) {
|
||
|
|
map.remove(markers);
|
||
|
|
document.getElementById('longitude').value = e.lnglat.getLng();
|
||
|
|
document.getElementById('latitude').value = e.lnglat.getLat();
|
||
|
|
lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
|
||
|
|
var marker = new AMap.Marker({
|
||
|
|
//加點
|
||
|
|
map: map,
|
||
|
|
position: lnglatXY,
|
||
|
|
});
|
||
|
|
marker.extData = {
|
||
|
|
getLng: e.lnglat.getLng(),
|
||
|
|
getLat: e.lnglat.getLat(),
|
||
|
|
}; //自定義想傳入的引數
|
||
|
|
|
||
|
|
marker.on("click", function (e) {
|
||
|
|
var hs = e.target.extData;
|
||
|
|
var content = openInfo(
|
||
|
|
"",
|
||
|
|
"(" + hs["getLat"] + ", " + hs["getLng"] + ")",
|
||
|
|
hs["getLng"],
|
||
|
|
hs["getLat"]
|
||
|
|
);
|
||
|
|
});
|
||
|
|
markers.push(marker);
|
||
|
|
if (typeof(infoWindow) != "undefined") {
|
||
|
|
infoWindow.close();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|