我正在尝试使用JavaScript从坐标(反向地理编码地图位置)中检索地址。我已经正确配置了app_id和app_code,并且出现以下错误:
<ns2:Error xmlns:ns2="http://www.navteq.com/lbsp/Errors/1" type="PermissionError" subtype="InvalidCredentials">
<Details>invalid credentials for f9t3XXXXXXXXXXXXXX</Details>
</ns2:Error>
我的帐户是“免费XYZ”,我想可以使用此服务。
这是我在Symfony APP中设置的代码(所有功能都可以正常进行反向地理编码):
var platform = new H.service.Platform({
'app_id':'my_app_id',
'app_code':'my_app_code',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(document.getElementById('mapContainer'),
defaultLayers.normal.map,
{
/*pixelRatio: pixelRatio*/
center: pos,
zoom: 5
}
);
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
ui.getControl('mapsettings').setDisabled(true).setVisibility(false);
ui.getControl('zoom').setDisabled(true).setVisibility(false);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
map.setZoom(14);
var marker = new H.map.Marker(pos);
map.addObject(marker);
// Create the parameters for the reverse geocoding request:
var reverseGeocodingParameters = {
prox: position.coords.latitude + ',' + position.coords.longitude + ',' + position.coords.accuracy,
mode: 'retrieveAddresses',
maxresults: 1
};
// Define a callback function to process the response:
function onSuccess(result) {
var location = result.Response.View[0].Result[0];
// Create an InfoBubble at the returned location with
// the address as its contents:
ui.addBubble(new H.ui.InfoBubble({
lat: location.Location.DisplayPosition.Latitude,
lng: location.Location.DisplayPosition.Longitude
}, { content: location.Location.Address.Label }));
};
// Get an instance of the geocoding service:
var geocoder = platform.getGeocodingService();
// Call the geocode method with the geocoding parameters,
// the callback and an error callback function (called if a
// communication error occurs):
geocoder.reverseGeocode(
reverseGeocodingParameters,
onSuccess,
function(e) { console.log(e); });
}, function () {
var bubble = new H.ui.InfoBubble(pos, { content: "{{ 'geolocation.should.be.enabled'|trans|raw }}" });
// show info bubble
ui.addBubble(bubble);
});
} else {
var bubble = new H.ui.InfoBubble(pos, { content: "{{ 'browser.does.not.support.geolocation'|trans|raw }}" });
// show info bubble
ui.addBubble(bubble);
}
答案 0 :(得分:1)
Here Developer网站提供了有关解释的详细示例,说明如何使用反向地址解析器JS API。请参阅https://developer.here.com/api-explorer/maps-js/v3.0/servicesRouting/reverse-geocode-an-address-from-location 文件的正确版本。希望这可以帮助!
<!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>