Добавление динамических маркеров в файл карты карты.

Question

Я ищу способ, чтобы добавить маркеры на карте, который я создал в веб-страницы ... Вот код страницы ...

<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' /> 
<script src='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script> 

<style> 
    #map { 
     width: 100%; 
     height: 600px; 
    } 
</style> 

<div id='map' /> 

<script type='text/javascript'> 
    var map = L.mapbox.map('map', '[mapname]') 

</script> 

Это отображает карту из mapbox - но я не могу понять, как написать веб-сервис для предоставления маркеров. Эти данные хранятся в таблице в базе данных SQL.

Я понимаю, что могу загрузить файл GeoJSON с данными, но я не уверен, как создать этот файл - и как он отличается от обычного JSON - любая помощь была бы признательна!

Благодаря

Answer 1

Я не знаю, в формат GeoJSON, но это, как вы справиться с этим с помощью v3 API Google Maps:

Для одного маркеров:

 lng = (4.502384184313996, 4.461185453845246); 
     lat = (51.011527400014664, 51.02974935275779); 
     cur_loc = new google.maps.LatLng(lat, lng); 

     var marker = new google.maps.Marker({ 
      position: cur_loc, //To be defined with LatLng variable type 
      draggable: false, 
      animation: google.maps.Animation.DROP, 
      icon: image 
     }); 

     // To add the marker to the map, call setMap(); 
     marker.setMap(map); 

для нескольких маркеров, полученных из MySQL (Ajax):

 google.maps.event.addListener(map, 'idle', function() { 
      var bounds = map.getBounds(); 
      var ne_lat = bounds.getNorthEast().lat(); 
      var ne_lng = bounds.getNorthEast().lng(); 
      var sw_lat = bounds.getSouthWest().lat(); 
      var sw_lng = bounds.getSouthWest().lng(); 
      // Call you server with ajax passing it the bounds 
      $.ajax({ 
        type: "GET", 
        url: "http://www.zwoop.be/develop/home/bars/bars_get_markers.php", 
        data: { 
         'ne_lat': ne_lat, 
         'ne_lng': ne_lng, 
         'sw_lat': sw_lat, 
         'sw_lng': sw_lng 
        }, 
        datatype: "json", 
        success: function(data){ 
        if(data){ 
         // In the ajax callback delete the current markers and add new markers 
         function clearOverlays() { 
          for (var i = 0; i < array_markers.length; i++){ 
           array_markers[i].setMap(null); 
          } 
          array_markers = []; 
         }; 
         clearOverlays(); 

         //parse the returned json obect 
         //Create a marker for each of the returned objects       
         var obj = $.parseJSON(data); 
         $.each(obj, function(index,el) { 
          var bar_position = new google.maps.LatLng(el.lat, el.lng); 
          image_bar = "http://www.sherv.net/cm/emoticons/drink/whiskey-smiley-emoticon.gif"; 

          var marker = new google.maps.Marker({ 
           position: bar_position, 
           map: map, 
           icon: image_bar 
           }); 
          //Add info window. With HTML, the text format can be edited. 
          google.maps.event.addListener(marker, 'click', function() { 
           if (infowindow){ 
            infowindow.close(); 
           }; 
           content = "<div id='infowindow_container'><h3><a class='profile_name_bar' href='#' id='" + el.profile_id + "'>"+el.profile_name+"</a></h3></div>"; 
           infowindow = new google.maps.InfoWindow({ 
            content: content 
           }); 
           infowindow.open(map,marker); 
          });        
          array_markers.push(marker); 
         }); 

         //Place the markers on the map 
         function setAllMap(map) { 
          for (var i = 0; i < array_markers.length; i++) { 
          array_markers[i].setMap(map); 
          } 
         } 
         setAllMap(map); 

         //marker clusterer 
         var zoom = 17; 
         var size = size ==-1?null:size; 
         var style = style ==-1?null:style; 
         var markerCluster = new MarkerClusterer(map, array_markers,{maxZoom:zoom,gridSize:size}); 
        } 
       }, 
        error: function (xhr, ajaxOptions, error) { 
         alert(error); 
         } 
        })    
      }); 

Этот код просматривает видовое окно карты и загружает м arkers динамически. При масштабировании/панорамировании код запрашивает базу данных: координаты LatLng границ карты отправляются на сервер, а координаты маркера, которые находятся в базе данных, возвращаются из вызова Ajax. Координаты маркера загружаются в массив на клиенте и записываются на карту. Я использовал кластер-кластер, чтобы избежать переполненных маркеров.

Надеюсь, это поможет. Я не знаю преимуществ плагина, который вы используете.

Answer 2

Я делаю что-то подобное, это то место, где я собираюсь.

Я использую PHP, чтобы получить координаты из базы данных MySQL и вернуть что-то вроде этого:

var geoJson = [ 
    { 
     type: 'Feature', 
     "geometry": { "type": "Point", "coordinates": [-77.03, 38.90]}, 
     "properties": {} 
    }, 
    { 
     type: 'Feature', 
     "geometry": { "type": "Point", "coordinates": [-64.567, 32.483]}, 
     "properties": {} 
    }  
]; 

Файл PHP выглядит следующим образом:

<?php 
      // Connect 
      $link = mysqli_connect("[host]","[username]","[password]","[database-name]") or die("Error " . mysqli_error($link)); 

      // Get the coordinates of the places 
      $query = "SELECT * FROM `places`"; 
      $places = $link->query($query); 

       var geoJson = [<?php 

       // Loop through places and plot them on map 

       // This is just building the JSON string 

       $i = 1; 
       while($venue = $venues->fetch_assoc()): 

        if($i > 1){ echo ","; } ?> 
        { 
         type: 'Feature', 
         "geometry": { "type": "Point", "coordinates": [<?php echo $venue['lon']; ?>, <?php echo $venue['lat']; ?>]}, 
         "properties": {} 
        } 

        <?php $i++; ?> 

       <?php endwhile; ?> 

      ]; 




      map.markerLayer.setGeoJSON(geoJson); 

Примечание - Это PHP находится внутри Javascript, который делает карту.

Как я уже сказал, его первые дни для меня тоже. Приведенный выше код работает, но он до сих пор до сих пор. Следующее, что я собираюсь посмотреть, это шаблоны JavaScript и их использование для того, чтобы вытащить данные таким образом. У меня такое чувство, что это будет лучше, но я не уверен. В любом случае, возможно, это полезно для вас, дайте мне знать, если вы продолжите с ним :)