使用 HERE MAPS 从数据库导入标记 API

Question

我正在尝试使用 HERE 地图 API，我想从 mySQL 数据库中获取标记，我使用的 api 就像在此处论坛中显示的一样，但标记没有显示在我这里地图，我将使用此代码：

    <!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=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>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-clustering.js"></script>

    </head>
    <body>
      <div id="map" style="width: 100%; height: 400px; background: grey" />
      <script  type="text/javascript" charset="UTF-8" >
        /**
     * Display clustered markers on a map
     *
     * Note that the maps clustering module http://js.api.here.com/v3/3.0/mapsjs-clustering.js
     * must be loaded to use the Clustering

     * @param {H.Map} map A HERE Map instance within the application
     * @param {Array.<Object>} data Raw data that contains airports' coordinates
     */
    function startClustering(map, data) {
      // First we need to create an array of DataPoint objects,
      // for the ClusterProvider
      var dataPoints = data.map(function (item) {
        return new H.clustering.DataPoint(item.latitude, item.longitude);
      });

      // Create a clustering provider with custom options for clusterizing the input
      var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
        clusteringOptions: {
          // Maximum radius of the neighbourhood
          eps: 32,
          // minimum weight of points required to form a cluster
          minWeight: 2
        }
      });

      // Create a layer tha will consume objects from our clustering provider
      var clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);

      // To make objects from clustering provder visible,
      // we need to add our layer to the map
      map.addLayer(clusteringLayer);
    }


    /**
     * 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
    var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map, {
      center: new H.geo.Point(30.789, 33.790),
      zoom: 2,
      pixelRatio: pixelRatio
    });

    // 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));


    // Step 4: create the default UI component, for displaying bubbles
    var ui = H.ui.UI.createDefault(map, defaultLayers);

    // Step 5: request a data about airports's coordinates
    var url= 'https://jsondataexemple.com/hereapi/jsondata.json';
$.ajax({
    type: 'GET',
    dataType: 'json',
    url: url,
    success:  function (data) {
      startClustering(map, data);
    }
});
     </script>
    </body>
    </html>

Json 文件是通过 php 脚本从我的数据库生成的：

[{"id":2812,"latitude":"33.5706476858027","longitude":"-7.600212045766735"},{"id":2811,"latitude":"33.56960668831451","longitude":"-7.6025319565980904"}]

谢谢你帮助我

Answer 1

在你的json中，纬度、经度似乎是字符串。他们应该浮动。您可以考虑在 JS 中使用 ParseFloat 或更改您的 php 脚本。

Answer 2

在测试 chrome 调试器后，我发现问题出在我的本地主机上，但代码在我的在线主机上运行正常！

对不起

使用 HERE MAPS 从数据库导入标记 API

importe markers from database usin HERE MAPS API

javascript

database

maps

json

here-api