javascript - Bing Map API - 使用两个地址计算距离
问题描述
有没有办法计算两个地址字段之间的距离/英里并在 HTML 中显示
我想显示距离<samp id="searchResult"></samp>
我想显示英里*15<samp id="Price"></samp>
如果有人知道怎么做,请帮我解决。
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<form>
<div class="form-group">
<label for="searchBox">Address</label>
<div id="searchBoxContainer"><input class="form-control" type="text" id="searchBox" /></div>
</div>
<div class="form-group">
<label for="searchBoxAlt">Alternative Address</label>
<div id="searchBoxContainerAlt"><input class="form-control" type="text" id="searchBoxAlt" /></div>
</div>
<samp id="searchResult"></samp>
<samp id="Price"></samp>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script
type="text/javascript"
src="https://www.bing.com/api/maps/mapcontrol?key=AjwUEXFZA8SMyy8CaJj59vJKVDoWohNXVFz_uGyHlT8N40Jgr-zrhvcxbTNRyDqn&callback=bingMapsReady"
async
defer
></script>
Javascript
function bingMapsReady() {
Microsoft.Maps.loadModule("Microsoft.Maps.AutoSuggest", {
callback: onLoad,
errorCallback: logError,
credentials: 'Ap12Gwv9esg5iXgfAh5Ehlbf36MZ-O8051Sl66Zm6glGwq7PSaaKgGPpcOUEGICy'
});
function onLoad() {
var options = { countryCode: 'MV',maxResults: 8 };
initAutosuggestControl(options, "searchBox", "searchBoxContainer");
initAutosuggestControl(options, "searchBoxAlt", "searchBoxContainerAlt");
}
}
function initAutosuggestControl(
options,
suggestionBoxId,
suggestionContainerId
) {
var manager = new Microsoft.Maps.AutosuggestManager(options);
manager.attachAutosuggest(
"#" + suggestionBoxId,
"#" + suggestionContainerId,
selectedSuggestion
);
function selectedSuggestion(suggestionResult) {
document.getElementById(suggestionBoxId).innerHTML =
suggestionResult.formattedSuggestion;
}
}
function logError(message) {
console.log(message);
}
解决方案
推荐阅读
- r - Jtools-错误消息-没有适用于“summ”的方法应用于类“list”的对象
- android - Android 自定义 SeekBar - 进度不跟随拇指
- java - 如何使用 Gradle 安装 Aspose.Words for Java
- java - javac:没有源文件
- r - 如何将具有相似变量名称的多个数据框组合成一个数据框?
- php - Carbon:在 Carbon::parse 中允许时间戳
- c# - 将 ComboBox 与整数集合绑定
- flutter - 如何在颤振中使用 lerp() 方法以及用例是什么?
- assembly - 执行汇编函数的访问冲突
- asp.net - 在windows Server 2016的IIS中配置2个站点