将Bing Map Autosuggest API添加到表单中的多个字段

问题描述

我希望将Bing Maps Autosuggest API添加到表单中的两个字段中.当我执行代码时，autosuggest API仅适用于一个字段，而不适用于其他字段.

I wish to add the Bing Maps Autosuggest API to two fields in my form. When I execute the code, the autosuggest API works just for one field and not the other.

以下是我到目前为止所得到的:

Below is what I got so far :

<script type='text/javascript'>
    function loadMapScenario() {
        Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
            callback: onLoad,
            errorCallback: onError
        });
        function onLoad() {
            var options = { maxResults: 8 };
            var manager = new Microsoft.Maps.AutosuggestManager(options);
            manager.attachAutosuggest('#searchBox', '#searchBoxContainer', selectedSuggestion);
            manager.attachAutosuggest('#searchBoxPlaceBirth', '#searchBoxContainerPlaceBirth', selectedSuggestionPlaceBirth);
        }
        function onError(message) {
            document.getElementById('printoutPanel').innerHTML = message;
        }

        function selectedSuggestion(suggestionResult) {
            document.getElementById('searchBox').innerHTML =
                suggestionResult.formattedSuggestion;
        }

        function selectedSuggestionPlaceBirth(suggestionResult) {
            document.getElementById('searchBoxPlaceBirth').innerHTML =
                suggestionResult.formattedSuggestion;
        }
    }
</script>


<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=Bing Map Key&callback=loadMapScenario' async defer></script>

<form action="Test" method="post">
    <div style="height: 100px;"></div>
    <div class="row">
        <div class="col-lg-12">
            <h2>Type your location in the following address bar</h2>
            <div class="row">
                <div class="col-lg-12" id='printoutPanel'> </div>
            </div>
            <div id='searchBoxContainer'><input type='text' id='searchBox' name='searchBox' placeholder="Search a Location" class="form-control" /></div>

            <div id='searchBoxContainerPlaceBirth'><input type='text' id='searchBoxPlaceBirth' name='searchBoxPlaceBirth' placeholder="Place of birth" class="form-control" /></div>

            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        </div>
    </div>
</form>

我希望自动建议功能可以在这两个字段中使用，所以我可以获得精确的位置.

I'll like the autosuggest functionality to work for the two fields, so I can get precise locations.

请提供任何帮助！

推荐答案

似乎支持Autosuggest仅在单个输入框中附加 .在具有多个输入框的情况下，表示 AutosuggestManager类应在每个输入框内创建.以下示例对此进行了演示:

It appears Autosuggest is supported to be attached per a single input box only. Meaning in case of multiple input boxes, the instance of AutosuggestManager class should be created per every input box. The following example demonstrates it:

function bingMapsReady() {
  Microsoft.Maps.loadModule("Microsoft.Maps.AutoSuggest", {
    callback: onLoad,
    errorCallback: logError,
    credentials: 'Ap12Gwv9esg5iXgfAh5Ehlbf36MZ-O8051Sl66Zm6glGwq7PSaaKgGPpcOUEGICy'
  });

  function onLoad() {
    var options = { 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);
}

<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">

<script
  type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=bingMapsReady" async defer></script>

<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>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

演示

这篇关于将Bing Map Autosuggest API添加到表单中的多个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！