zhudongjer/carrot
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

导航问题

Browse Source
This commit is contained in:
机械小鸽 2025-03-28 19:35:42 +08:00 committed by GitHub
parent 2476b254fa
commit 64ae3e310f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 192 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
RELEASES.md
View File

@ -1,10 +1,4 @@
致谢： 致谢：刘京文 （马自达阿特兹）CYF （捷达vs7）Mr.one 马威 交流学习：知识星球 -> openpilot知识库
刘京文 （马自达阿特兹）
CYF （捷达vs7）
Mr.one 马威
交流学习：知识星球 -> openpilot知识库
Version 0.9.9 Version 0.9.9
======================== ========================

328
selfdrive/frogpilot/fleetmanager/templates/amap_addr_input.html
View File

@ -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.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit-icons.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"> <style type="text/css">
body { body {
margin: 0; margin: 0;
@ -67,149 +61,209 @@
.amap-info-content { .amap-info-content {
font-size: 12px; font-size: 12px;
} }
#map-section {
display: none;
}
</style> </style>
<script type="text/javascript" <!-- 添加 API 密钥输入表单 -->
src="https://webapi.amap.com/maps?v=1.4.2&key=faf2f8ab406a8da1231ef7e10d501b65"></script> <div id="api-keys-section" class="uk-card uk-card-default uk-card-body uk-margin-bottom">
<h3 class="uk-card-title">请输入高德地图 API 密钥</h3>
<!-- Rest of the HTML body content --> <div class="uk-margin">
<div class="uk-grid-match uk-grid-small uk-text-center" uk-grid> <label class="uk-form-label" for="security-js-code">安全密钥 (Security JS Code):</label>
<div class="uk-width-1-3@m"> <input class="uk-input" type="text" id="security-js-code" placeholder="请输入 securityJsCode">
<select id="save_type" class="uk-select">
<option value="recent">最近</option>
<option value="home">住家</option>
<option value="work">工作</option>
</select>
</div> </div>
<div class="uk-width-expand@m"> <div class="uk-margin">
<input class="uk-input" type="text" id="keyword" name="keyword" <label class="uk-form-label" for="api-key">API 密钥 (Key):</label>
placeholder="请输入关键字：(选定后搜索)" onfocus='this.value=""' /> <input class="uk-input" type="text" id="api-key" placeholder="请输入 API key">
</div> </div>
<button class="uk-button uk-button-primary" id="load-map-btn">加载地图</button>
</div> </div>
<input type="hidden" id="longitude" />
<input type="hidden" id="latitude" /> <!-- 地图和搜索区域 -->
<div style="height: 600px" id="container"></div> <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">
<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"> <script type="text/javascript">
// 全局变量声明
var windowsArr = []; var windowsArr = [];
var markers = []; var markers = [];
var map = new AMap.Map("container", { var map = null;
resizeEnable: true, var infoWindow = null;
center: [{{lat}}, {{lon}}], //地图中心点 var autocomplete = null;
zoom: 13, //地图显示的缩放级别 var initMapFunction = function() {
keyboardEnable: false, windowsArr = [];
}); markers = [];
map = new AMap.Map("container", {
resizeEnable: true,
center: [{{lat}}, {{lon}}],
zoom: 13,
keyboardEnable: false
});
var infoWindow; // 定义打开信息窗体的函数
function openInfo(name, addr, lng, lat) { function openInfo(name, addr, lng, lat) {
//构建信息窗体中显示的内容 // 构建信息窗体中显示的内容
var info = []; var info = [];
info.push('<div class="uk-card uk-card-default uk-card-body">'); 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('<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("<h3 style=\"padding-top: 10px;\" class=\"uk-card-title\">" + name + "</h3>");
info.push("<p>" + addr + "</p>"); info.push("<p>" + addr + "</p>");
info.push('<div class="uk-card-footer">'); info.push('<div class="uk-card-footer">');
info.push('<form name="navForm" method="post">'); info.push('<form name="navForm" method="post">');
info.push(' <input type="hidden" name="lat" value="' + lat + '">'); info.push(' <input type="hidden" name="lat" value="' + lat + '">');
info.push(' <input type="hidden" name="lon" value="' + lng + '">'); 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="save_type" value="' + document.getElementById("save_type").value + '">');
info.push(' <input type="hidden" name="name" value="' + name + '">'); info.push(' <input type="hidden" name="name" value="' + name + '">');
info.push(' <input class="uk-button uk-button-primary" type="submit" value="导航" >'); info.push(' <input class="uk-button uk-button-primary" type="submit" value="导航" >');
info.push('</form>'); info.push('</form>');
info.push('</div>'); info.push('</div>');
info.push("</div>"); info.push("</div>");
var pos = new AMap.LngLat(lng, lat) var pos = new AMap.LngLat(lng, lat);
infoWindow = new AMap.InfoWindow({ infoWindow = new AMap.InfoWindow({
position: pos, position: pos,
isCustom: true, isCustom: true,
offset: new AMap.Pixel(0, -30), offset: new AMap.Pixel(0, -30),
content: info.join(""), //使用默认信息窗体框样式，显示信息内容 content: info.join("") // 使用默认信息窗体框样式，显示信息内容
}); });
infoWindow.open(map, pos); 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") { AMap.plugin(["AMap.Autocomplete", "AMap.PlaceSearch"], function() {
for (var h = 0; h < result.poiList.pois.length; h++) { var autoOptions = {
//返回搜尋列表迴圈繫結marker city: "全国", // 城市，默认全国
var jy = result.poiList.pois[h]["location"]; //經緯度 input: "keyword" // 使用联想输入的input的id
var name = result.poiList.pois[h]["name"]; //地址 };
marker = new AMap.Marker({ autocomplete = new AMap.Autocomplete(autoOptions);
//加點 var placeSearch = new AMap.PlaceSearch({
map: map, map: ""
position: jy, });
// 添加选择事件监听器
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); // 关键字查询
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"]; // 地址
var 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;
openInfo(
hs["name"],
hs["address"],
hs["getLng"],
hs["getLat"]
);
});
markers.push(marker);
}
}
}
});
});
// 添加地图点击事件
map.on('click', function(e) {
map.remove(markers);
document.getElementById('longitude').value = e.lnglat.getLng();
document.getElementById('latitude').value = e.lnglat.getLat();
var 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;
openInfo(
"",
"(" + hs["getLat"] + ", " + hs["getLng"] + ")",
hs["getLng"],
hs["getLat"]
);
});
markers.push(marker);
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';
}); });
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();
}
});
// 初始化地图的函数
function initMap() {
initMapFunction();
}
</script> </script>
{% endblock %} {% endblock %}