маркеры импорта из базы данных с помощью HERE MAPS API - PullRequest
Новая
       9

маркеры импорта из базы данных с помощью HERE MAPS API

0 голосов
/ 26 декабря 2018

Я пытаюсь использовать HERE MAPS 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"}]

спасибо за помощь

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

после тестирования отладчика Chrome я обнаружил, что проблема с моего локального хоста, но код работает на моем онлайн хосте!.

извините

0 голосов
/ 27 декабря 2018

В вашем JSON, широта, долгота, кажется, String.они должны плавать.Вы можете использовать ParseFloat в JS или изменить скрипт php.

...