Javascript 对地图位置进行反向地理编码时出现无效凭据错误
我正试图用javascript从坐标中检索地址，对地图位置进行反向地理编码。我已正确配置应用程序id和应用程序代码，并出现以下错误：Javascript 对地图位置进行反向地理编码时出现无效凭据错误,javascript,maps,here-api,Javascript,Maps,Here Api,我正试图用javascript从坐标中检索地址，对地图位置进行反向地理编码。我已正确配置应用程序id和应用程序代码，并出现以下错误： <ns2:Error xmlns:ns2="http://www.navteq.com/lbsp/Errors/1" type="PermissionError" subtype="InvalidCredentials"> <Details>invalid credentials for f9t3XXXXXXXXXXXXXX<
<ns2:Error xmlns:ns2="http://www.navteq.com/lbsp/Errors/1" type="PermissionError" subtype="InvalidCredentials">
<Details>invalid credentials for f9t3XXXXXXXXXXXXXX</Details>
</ns2:Error>
关于如何使用ReverseGeocoderJSAPI，开发者网站提供了详细的示例和解释。参考 获取文件的正确版本。希望这有帮助
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1549984893" />
<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>
</head>
<body>
<div id="map" style="position:absolute; width:49%; height:100%; background:grey" ></div>
<div id="panel" style="position:absolute; width:49%; left:51%; height:100%; background:inherit" ></div>
<script type="text/javascript" charset="UTF-8" >
/**
* Calculates and displays the address details of the location found at
* a specified location in Berlin (52.5309°N 13.3847°E) using a 150 meter
* radius to retrieve the address of Nokia House. The expected address is:
* Invalidenstraße 116, 10115 Berlin.
*
*
* A full list of available request parameters can be found in the Geocoder API documentation.
* see: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-reverse-geocode.html
*
* @param {H.service.Platform} platform A stub class to access HERE services
*/
function reverseGeocode(platform) {
var geocoder = platform.getGeocodingService(),
reverseGeocodingParameters = {
prox: '52.5309,13.3847,150', // Berlin
mode: 'retrieveAddresses',
maxresults: '1',
jsonattributes : 1
};
geocoder.reverseGeocode(
reverseGeocodingParameters,
onSuccess,
onError
);
}
/**
* This function will be called once the Geocoder REST API provides a response
* @param {Object} result A JSONP object representing the location(s) found.
*
* see: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-type-response-geocode.html
*/
function onSuccess(result) {
var locations = result.response.view[0].result;
/*
* The styling of the geocoding response on the map is entirely under the developer's control.
* A representitive styling can be found the full JS + HTML code of this example
* in the functions below:
*/
addLocationsToMap(locations);
addLocationsToPanel(locations);
// ... etc.
}
/**
* This function will be called if a communication error occurs during the JSON-P request
* @param {Object} error The error message received.
*/
function onError(error) {
alert('Ooops!');
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'devportal-demo-20180625',
app_code: '9v2BkviRwi9Ot26kp2IysQ',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
//Step 2: initialize a map - this map is centered over California
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:37.376, lng:-122.034},
zoom: 15,
pixelRatio: pixelRatio
});
var locationsContainer = document.getElementById('panel');
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Hold a reference to any infobubble opened
var bubble;
/**
* Opens/Closes a infobubble
* @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,
{content: text});
ui.addBubble(bubble);
} else {
bubble.setPosition(position);
bubble.setContent(text);
bubble.open();
}
}
/**
* Creates a series of list items for each location found, and adds it to the panel.
* @param {Object[]} locations An array of locations as received from the
* H.service.GeocodingService
*/
function addLocationsToPanel(locations){
var nodeOL = document.createElement('ul'),
i;
nodeOL.style.fontSize = 'small';
nodeOL.style.marginLeft ='5%';
nodeOL.style.marginRight ='5%';
for (i = 0; i < locations.length; i += 1) {
var li = document.createElement('li'),
divLabel = document.createElement('div'),
address = locations[i].location.address,
content = '<strong style="font-size: large;">' + address.label + '</strong></br>';
position = {
lat: locations[i].location.displayPosition.latitude,
lng: locations[i].location.displayPosition.longitude
};
content += '<strong>houseNumber:</strong> ' + address.houseNumber + '<br/>';
content += '<strong>street:</strong> ' + address.street + '<br/>';
content += '<strong>district:</strong> ' + address.district + '<br/>';
content += '<strong>city:</strong> ' + address.city + '<br/>';
content += '<strong>postalCode:</strong> ' + address.postalCode + '<br/>';
content += '<strong>county:</strong> ' + address.county + '<br/>';
content += '<strong>country:</strong> ' + address.country + '<br/>';
content += '<br/><strong>position:</strong> ' +
Math.abs(position.lat.toFixed(4)) + ((position.lat > 0) ? 'N' : 'S') +
' ' + Math.abs(position.lng.toFixed(4)) + ((position.lng > 0) ? 'E' : 'W');
divLabel.innerHTML = content;
li.appendChild(divLabel);
nodeOL.appendChild(li);
}
locationsContainer.appendChild(nodeOL);
}
/**
* Creates a series of H.map.Markers for each location found, and adds it to the map.
* @param {Object[]} locations An array of locations as received from the
* H.service.GeocodingService
*/
function addLocationsToMap(locations){
var group = new H.map.Group(),
position,
i;
// Add a marker for each location found
for (i = 0; i < locations.length; i += 1) {
position = {
lat: locations[i].location.displayPosition.latitude,
lng: locations[i].location.displayPosition.longitude
};
marker = new H.map.Marker(position);
marker.label = locations[i].location.address.label;
group.addObject(marker);
}
group.addEventListener('tap', function (evt) {
map.setCenter(evt.target.getPosition());
openBubble(
evt.target.getPosition(), evt.target.label);
}, false);
// Add the locations group to the map
map.addObject(group);
map.setViewBounds(group.getBounds());
}
// Now use the map as required...
reverseGeocode(platform);
</script>
</body>
</html>
你能发送你的js文件吗？你好，我在问题中添加了我的js代码。谢谢。我使用的是开发者网站上的代码，以前不起作用。我想这是因为针对特定域保护应用程序。现在正在工作。非常感谢。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1549984893" />
<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>
</head>
<body>
<div id="map" style="position:absolute; width:49%; height:100%; background:grey" ></div>
<div id="panel" style="position:absolute; width:49%; left:51%; height:100%; background:inherit" ></div>
<script type="text/javascript" charset="UTF-8" >
/**
* Calculates and displays the address details of the location found at
* a specified location in Berlin (52.5309°N 13.3847°E) using a 150 meter
* radius to retrieve the address of Nokia House. The expected address is:
* Invalidenstraße 116, 10115 Berlin.
*
*
* A full list of available request parameters can be found in the Geocoder API documentation.
* see: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-reverse-geocode.html
*
* @param {H.service.Platform} platform A stub class to access HERE services
*/
function reverseGeocode(platform) {
var geocoder = platform.getGeocodingService(),
reverseGeocodingParameters = {
prox: '52.5309,13.3847,150', // Berlin
mode: 'retrieveAddresses',
maxresults: '1',
jsonattributes : 1
};
geocoder.reverseGeocode(
reverseGeocodingParameters,
onSuccess,
onError
);
}
/**
* This function will be called once the Geocoder REST API provides a response
* @param {Object} result A JSONP object representing the location(s) found.
*
* see: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-type-response-geocode.html
*/
function onSuccess(result) {
var locations = result.response.view[0].result;
/*
* The styling of the geocoding response on the map is entirely under the developer's control.
* A representitive styling can be found the full JS + HTML code of this example
* in the functions below:
*/
addLocationsToMap(locations);
addLocationsToPanel(locations);
// ... etc.
}
/**
* This function will be called if a communication error occurs during the JSON-P request
* @param {Object} error The error message received.
*/
function onError(error) {
alert('Ooops!');
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'devportal-demo-20180625',
app_code: '9v2BkviRwi9Ot26kp2IysQ',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
//Step 2: initialize a map - this map is centered over California
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:37.376, lng:-122.034},
zoom: 15,
pixelRatio: pixelRatio
});
var locationsContainer = document.getElementById('panel');
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Hold a reference to any infobubble opened
var bubble;
/**
* Opens/Closes a infobubble
* @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,
{content: text});
ui.addBubble(bubble);
} else {
bubble.setPosition(position);
bubble.setContent(text);
bubble.open();
}
}
/**
* Creates a series of list items for each location found, and adds it to the panel.
* @param {Object[]} locations An array of locations as received from the
* H.service.GeocodingService
*/
function addLocationsToPanel(locations){
var nodeOL = document.createElement('ul'),
i;
nodeOL.style.fontSize = 'small';
nodeOL.style.marginLeft ='5%';
nodeOL.style.marginRight ='5%';
for (i = 0; i < locations.length; i += 1) {
var li = document.createElement('li'),
divLabel = document.createElement('div'),
address = locations[i].location.address,
content = '<strong style="font-size: large;">' + address.label + '</strong></br>';
position = {
lat: locations[i].location.displayPosition.latitude,
lng: locations[i].location.displayPosition.longitude
};
content += '<strong>houseNumber:</strong> ' + address.houseNumber + '<br/>';
content += '<strong>street:</strong> ' + address.street + '<br/>';
content += '<strong>district:</strong> ' + address.district + '<br/>';
content += '<strong>city:</strong> ' + address.city + '<br/>';
content += '<strong>postalCode:</strong> ' + address.postalCode + '<br/>';
content += '<strong>county:</strong> ' + address.county + '<br/>';
content += '<strong>country:</strong> ' + address.country + '<br/>';
content += '<br/><strong>position:</strong> ' +
Math.abs(position.lat.toFixed(4)) + ((position.lat > 0) ? 'N' : 'S') +
' ' + Math.abs(position.lng.toFixed(4)) + ((position.lng > 0) ? 'E' : 'W');
divLabel.innerHTML = content;
li.appendChild(divLabel);
nodeOL.appendChild(li);
}
locationsContainer.appendChild(nodeOL);
}
/**
* Creates a series of H.map.Markers for each location found, and adds it to the map.
* @param {Object[]} locations An array of locations as received from the
* H.service.GeocodingService
*/
function addLocationsToMap(locations){
var group = new H.map.Group(),
position,
i;
// Add a marker for each location found
for (i = 0; i < locations.length; i += 1) {
position = {
lat: locations[i].location.displayPosition.latitude,
lng: locations[i].location.displayPosition.longitude
};
marker = new H.map.Marker(position);
marker.label = locations[i].location.address.label;
group.addObject(marker);
}
group.addEventListener('tap', function (evt) {
map.setCenter(evt.target.getPosition());
openBubble(
evt.target.getPosition(), evt.target.label);
}, false);
// Add the locations group to the map
map.addObject(group);
map.setViewBounds(group.getBounds());
}
// Now use the map as required...
reverseGeocode(platform);
</script>
</body>
</html>