我是新来的 我正在尝试使此处的带有搜索框的地图在地图上（来自地理编码自动完成功能）与侧边栏控件（与我选择的气泡信息一起）。 将它们合并在同一张地图上时出现问题。 也许有人可以告诉我我的错误？
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<meta name="keywords" content="addSidebarControl" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1542186754" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<title>HERE Maps API Example: Sidebar control</title>
<script type="text/javascript" src="libs/hereAppIdAndToken.js"></script>
<script type="text/javascript" src="libs/jQl.min.js"></script>
<script type="text/javascript" src="libs/hereAsyncLoader.js"
id="HereMapsLoaderScript"
data-params="maps,datarendering"
data-map-container="mapContainer"
data-callback="afterHereMapLoad"
data-libs="sidebar-control"
data-parent="demos/sidebar-component/">
</script>
<link rel="icon" href="http://here.com/favicon.ico"/>
<!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
<style type="text/css">
#sidebar .nm_sidebar{
list-style: circle
}
#sidebar .nm_sidebar .highlight{
font-weight: lighter;
color:black;
background:yellow;
border: 1px solid black;
}
</style>
</head>
<body class="small-map">
<h1>Here maps api</h1>
<div id="map" style="width:540px; height:334px;float:left" class="no-expand"></div>
<div id="panel" style="position:absolute; width:10%; left:1%; height:10%; background:inherit"></div>
<div id="sidebar" style="float:left; color: rgb(102, 102, 102);"></div>
<script type="text/javascript" charset="UTF-8" >
var AUTOCOMPLETION_URL = 'https://autocomplete.geocoder.api.here.com/6.2/suggest.json',
ajaxRequest = new XMLHttpRequest(),
query = '';
function autoCompleteListener(textBox, event) {
if (query != textBox.value){
if (textBox.value.length >= 1){
var params = '?' +
'query=' + encodeURIComponent(textBox.value) + '&country=NLD,BEL,LUX' + // The search text which is the basis of the query
'&beginHighlight=' + encodeURIComponent('<mark>') + // Mark the beginning of the match in a token.
'&endHighlight=' + encodeURIComponent('</mark>') + // Mark the end of the match in a token.
'&maxresults=2' + // The upper limit the for number of suggestions to be included
// in the response. Default is set to 5.
'&app_id=' + APPLICATION_ID +
'&app_code=' + APPLICATION_CODE;
ajaxRequest.open('GET', AUTOCOMPLETION_URL + params );
ajaxRequest.send();
}
}
query = textBox.value;
}
function onAutoCompleteSuccess() {
clearOldSuggestions();
addSuggestionsToPanel(this.response); // In this context, 'this' means the XMLHttpRequest itself.
addSuggestionsToMap(this.response);
}
function onAutoCompleteFailed() {
alert('Ooops!');
}
ajaxRequest.addEventListener("load", onAutoCompleteSuccess);
ajaxRequest.addEventListener("error", onAutoCompleteFailed);
ajaxRequest.responseType = "json";
/**
* Boilerplate map initialization code starts below:
*/
// set up containers for the map + panel
var mapContainer = document.getElementById('map'),
suggestionsContainer = document.getElementById('panel');
//Step 1: initialize communication with the platform
var APPLICATION_ID = 'vB9Z6JFw6oXOPEM1oj6s',
APPLICATION_CODE = '1QSisEw8HYGMin3EW21nMw';
var platform = new H.service.Platform({
app_id: APPLICATION_ID,
app_code: APPLICATION_CODE,
useCIT: false,
useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();
var geocoder = platform.getGeocodingService();
var group = new H.map.Group();
group.addEventListener('tap', function (evt) {
map.setCenter(evt.target.getPosition());
openBubble(evt.target.getPosition(), evt.target.getData());
}, false);
//Step 2: initialize a map - this map is centered over Pernis
var map = new H.Map(mapContainer,
defaultLayers.normal.map,{
center: {lat:51.8914, lng:4.3903},
zoom: 9
});
map.addObject(group);
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
var bubble;
/**
* Function to Open/Close an infobubble on the map.
* @param {H.geo.Point} position The location on the map.
* @param {String} text The contents of the infobubble.
*/
function openBubble(position, text){
if(!bubble){
bubble = new H.ui.InfoBubble(
position,
// The FO property holds the province name.
{content: '<small>' + text+ '</small>'});
ui.addBubble(bubble);
} else {
bubble.setPosition(position);
bubble.setContent('<small>' + text+ '</small>');
bubble.open();
}
}
function addSuggestionsToMap(response){
var onGeocodeSuccess = function (result) {
var marker,
locations = result.Response.View[0].Result,
i;
// Add a marker for each location found
for (i = 0; i < locations.length; i++) {
marker = new H.map.Marker({
lat : locations[i].Location.DisplayPosition.Latitude,
lng : locations[i].Location.DisplayPosition.Longitude
});
marker.setData(locations[i].Location.Address.Label);
group.addObject(marker);
}
map.setViewBounds(group.getBounds());
if(group.getObjects().length < 2){
map.setZoom(15);
}
},
onGeocodeError = function (error) {
alert('Ooops!');
},
geocodeByLocationId = function (locationId) {
geocodingParameters = {
locationId : locationId
};
geocoder.geocode(
geocodingParameters,
onGeocodeSuccess,
onGeocodeError
);
}
response.suggestions.forEach(function (item, index, array) {
geocodeByLocationId(item.locationId);
});
}
function clearOldSuggestions(){
group.removeAll ();
if(bubble){
bubble.close();
}
}
function addSuggestionsToPanel(response){
var suggestions = document.getElementById('suggestions');
suggestions.innerHTML = JSON.stringify(response, null, ' ');
}
var content = '<strong style="font-size: large;">' + 'search' + '</strong>';
content += '<br/><input type="text" id="auto-complete" style="margin-left:5%; margin-right:5%; min-width:90%" onkeyup="return autoCompleteListener(this, event);"><br/>';
/** content += '<br/><strong>Response:</strong><br/>'; */
content += '<div style="margin-left:5%; margin-right:5%;"><pre style="max-height:235px"><code id="suggestions" style="font-size: small;">' +'{}' + '</code></pre></div>';
/** content += '<br/><strong>Response:</strong><br/>';
content += '<div style="margin-left:5%; margin-right:5%;"><pre style="max-height:235px"><code id="suggestions" style="font-size: small;">' +'{}' + '</code></pre></div>'; */
suggestionsContainer.innerHTML = content;
</script>
<script id="example-code" data-categories="library" type="text/javascript" src="libs/trips.js"></script>
<script type="text/javascript" src="libs/ending.js"></script>
</body>
</html>
我尝试使用mapContainer进行了一些更改，但是之后，有两个分开的地图没有合并，或者一半的功能无法正常工作。 请帮助