导航问题
This commit is contained in:
parent
2476b254fa
commit
64ae3e310f
@ -1,10 +1,4 @@
|
||||
致谢:
|
||||
刘京文 (马自达阿特兹)
|
||||
CYF (捷达vs7)
|
||||
Mr.one 马威
|
||||
|
||||
交流学习:知识星球 -> openpilot知识库
|
||||
|
||||
致谢:刘京文 (马自达阿特兹)CYF (捷达vs7)Mr.one 马威 交流学习:知识星球 -> openpilot知识库
|
||||
|
||||
Version 0.9.9
|
||||
========================
|
||||
|
@ -15,12 +15,6 @@
|
||||
<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:'fc2724b3c96a7f244b2211f05c5264be',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
@ -67,12 +61,28 @@
|
||||
.amap-info-content {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#map-section {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://webapi.amap.com/maps?v=1.4.2&key=faf2f8ab406a8da1231ef7e10d501b65"></script>
|
||||
<!-- 添加 API 密钥输入表单 -->
|
||||
<div id="api-keys-section" class="uk-card uk-card-default uk-card-body uk-margin-bottom">
|
||||
<h3 class="uk-card-title">请输入高德地图 API 密钥</h3>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="security-js-code">安全密钥 (Security JS Code):</label>
|
||||
<input class="uk-input" type="text" id="security-js-code" placeholder="请输入 securityJsCode">
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="api-key">API 密钥 (Key):</label>
|
||||
<input class="uk-input" type="text" id="api-key" placeholder="请输入 API key">
|
||||
</div>
|
||||
<button class="uk-button uk-button-primary" id="load-map-btn">加载地图</button>
|
||||
</div>
|
||||
|
||||
<!-- Rest of the HTML body content -->
|
||||
<!-- 地图和搜索区域 -->
|
||||
<div id="map-section">
|
||||
<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">
|
||||
@ -89,19 +99,28 @@
|
||||
<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,
|
||||
});
|
||||
</div>
|
||||
|
||||
var infoWindow;
|
||||
function openInfo(name, addr, lng, lat) {
|
||||
//构建信息窗体中显示的内容
|
||||
<script type="text/javascript">
|
||||
// 全局变量声明
|
||||
var windowsArr = [];
|
||||
var markers = [];
|
||||
var map = null;
|
||||
var infoWindow = null;
|
||||
var autocomplete = null;
|
||||
var initMapFunction = function() {
|
||||
windowsArr = [];
|
||||
markers = [];
|
||||
map = new AMap.Map("container", {
|
||||
resizeEnable: true,
|
||||
center: [{{lat}}, {{lon}}],
|
||||
zoom: 13,
|
||||
keyboardEnable: false
|
||||
});
|
||||
|
||||
// 定义打开信息窗体的函数
|
||||
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>');
|
||||
@ -118,56 +137,58 @@ function openInfo(name, addr, lng, lat) {
|
||||
info.push('</div>');
|
||||
info.push("</div>");
|
||||
|
||||
var pos = new AMap.LngLat(lng, lat)
|
||||
var pos = new AMap.LngLat(lng, lat);
|
||||
infoWindow = new AMap.InfoWindow({
|
||||
position: pos,
|
||||
isCustom: true,
|
||||
offset: new AMap.Pixel(0, -30),
|
||||
content: info.join(""), //使用默认信息窗体框样式,显示信息内容
|
||||
content: info.join("") // 使用默认信息窗体框样式,显示信息内容
|
||||
});
|
||||
|
||||
infoWindow.open(map, pos);
|
||||
}
|
||||
AMap.plugin(["AMap.Autocomplete", "AMap.PlaceSearch"], function () {
|
||||
}
|
||||
|
||||
// 加载插件
|
||||
AMap.plugin(["AMap.Autocomplete", "AMap.PlaceSearch"], function() {
|
||||
var autoOptions = {
|
||||
city: "全国", //城市,默认全国
|
||||
input: "keyword", //使用联想输入的input的id
|
||||
city: "全国", // 城市,默认全国
|
||||
input: "keyword" // 使用联想输入的input的id
|
||||
};
|
||||
autocomplete = new AMap.Autocomplete(autoOptions);
|
||||
var placeSearch = new AMap.PlaceSearch({
|
||||
map: "",
|
||||
map: ""
|
||||
});
|
||||
AMap.event.addListener(autocomplete, "select", function (e) {
|
||||
//TODO 针对选中的poi实现自己的功能
|
||||
//重寫搜尋點及其提示資訊begin=====
|
||||
|
||||
// 添加选择事件监听器
|
||||
AMap.event.addListener(autocomplete, "select", function(e) {
|
||||
// 重写搜索点及其提示信息
|
||||
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); //關鍵字查詢查詢
|
||||
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({
|
||||
//加點
|
||||
// 返回搜索列表循环绑定marker
|
||||
var jy = result.poiList.pois[h]["location"]; // 经纬度
|
||||
var name = result.poiList.pois[h]["name"]; // 地址
|
||||
var marker = new AMap.Marker({ // 加点
|
||||
map: map,
|
||||
position: jy,
|
||||
position: jy
|
||||
});
|
||||
marker.extData = {
|
||||
getLng: jy["lng"],
|
||||
getLat: jy["lat"],
|
||||
name: name,
|
||||
address: result.poiList.pois[h]["address"],
|
||||
}; //自定義想傳入的引數
|
||||
address: result.poiList.pois[h]["address"]
|
||||
}; // 自定义传入的参数
|
||||
|
||||
marker.on("click", function (e) {
|
||||
marker.on("click", function(e) {
|
||||
var hs = e.target.extData;
|
||||
var content = openInfo(
|
||||
openInfo(
|
||||
hs["name"],
|
||||
hs["address"],
|
||||
hs["getLng"],
|
||||
@ -178,27 +199,27 @@ AMap.plugin(["AMap.Autocomplete", "AMap.PlaceSearch"], function () {
|
||||
}
|
||||
}
|
||||
}
|
||||
//重寫搜尋點及其提示資訊end=====
|
||||
});
|
||||
});
|
||||
var clickEventListener = map.on('click', function(e) {
|
||||
});
|
||||
|
||||
// 添加地图点击事件
|
||||
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 lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
|
||||
var marker = new AMap.Marker({
|
||||
//加點
|
||||
map: map,
|
||||
position: lnglatXY,
|
||||
position: lnglatXY
|
||||
});
|
||||
marker.extData = {
|
||||
getLng: e.lnglat.getLng(),
|
||||
getLat: e.lnglat.getLat(),
|
||||
}; //自定義想傳入的引數
|
||||
getLat: e.lnglat.getLat()
|
||||
};
|
||||
|
||||
marker.on("click", function (e) {
|
||||
marker.on("click", function(e) {
|
||||
var hs = e.target.extData;
|
||||
var content = openInfo(
|
||||
openInfo(
|
||||
"",
|
||||
"(" + hs["getLat"] + ", " + hs["getLng"] + ")",
|
||||
hs["getLng"],
|
||||
@ -209,7 +230,40 @@ var clickEventListener = map.on('click', function(e) {
|
||||
if (typeof(infoWindow) != "undefined") {
|
||||
infoWindow.close();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('load-map-btn').addEventListener('click', function() {
|
||||
var securityJsCode = document.getElementById('security-js-code').value;
|
||||
var apiKey = document.getElementById('api-key').value;
|
||||
|
||||
if (!securityJsCode || !apiKey) {
|
||||
alert('请输入安全密钥和 API 密钥');
|
||||
return;
|
||||
}
|
||||
|
||||
// 设置安全配置
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: securityJsCode
|
||||
};
|
||||
|
||||
// 加载高德地图 API
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = 'https://webapi.amap.com/maps?v=1.4.2&key=' + apiKey;
|
||||
script.onload = function() {
|
||||
initMapFunction();
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
|
||||
// 显示地图区域
|
||||
document.getElementById('api-keys-section').style.display = 'none';
|
||||
document.getElementById('map-section').style.display = 'block';
|
||||
});
|
||||
|
||||
// 初始化地图的函数
|
||||
function initMap() {
|
||||
initMapFunction();
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user