个人中心
gpt4 book ai didi

javascript - 反向地理编码 map 位置时出现无效凭据错误

转载 作者：行者123 更新时间：2023-12-02 23:53:59 28 4
gpt4 key购买 nike

我正在尝试使用 javascript 从坐标(反向地理编码 map 位置)检索地址。我已正确配置 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);
}

最佳答案

这里开发者网站提供了有关如何使用反向地理编码器 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>

关于javascript - 反向地理编码 map 位置时出现无效凭据错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55494401/

28 4 0
文章推荐： javascript - Graphql 嵌套突变
文章推荐： javascript - 选择和单选选项来显示 div
文章推荐： javascript - Restful API typescript 和 promise
文章推荐： javascript - 如何在 Web 界面中授权应用程序脚本？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com