從PHP控制器動態添加標記

Question

我使用的是Google地圖API，並且想動態地創建標記。我正在使用Zend Framework，這是我的代碼的一部分。

誰可以幫助我獲取此對象以獲取標記，然後在地圖上顯示它們？

<script> 
 

 
     function initMap() { 
 
      
 
     var locations[]; 
 
     var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
 
     var map = new google.maps.Map(document.getElementById('ressearch'), { 
 
      zoom: 15, 
 
      center: {lat: 36.8454481, lng: 10.1995665} 
 
     }); 
 
     
 
     var markers = <?php echo json_encode($all_users_loc); ?>; 
 
     //console.info(markers); 
 
     // Create an array of alphabetical characters used to label the markers. 
 
     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
 
     for(var i=0;i<2;i++){ 
 
      location[i]=markers 
 
     } 
 
     var locations = [ 
 
     {lat: <?=$this->translate($all_users_loc[0][co_latitude])?>, lng: <?=$this->translate($all_users_loc[0][co_longitude])?>}, 
 
     {lat: 36.84573142925444, lng: 10.19872965563718}, 
 
     {lat: 36.84630667456557, lng: 10.199920556439793} 
 
     ] 
 
     // Add some markers to the map. 
 
     // Note: The code uses the JavaScript Array.prototype.map() method to 
 
     // create an array of markers based on a given "locations" array. 
 
     // The map() method here has nothing to do with the Google Maps API. 
 
     var markers = locations.map(function(location, i) { 
 
      return new google.maps.Marker({ 
 
      position: location, 
 
      label: labels[i % labels.length], 
 
      icon: image, 
 
      animation: google.maps.Animation.DROP, 
 
      }); 
 
     }); 
 

 
     // Add a marker clusterer to manage the markers. 
 
     var markerCluster = new MarkerClusterer(map, markers, 
 
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
 
     } 
 
     google.maps.event.addDomListener(window, "load", initMap); 
 

 
    </script>

<?php echo json_encode($all_users_loc); ?> 
 
<?=$this->translate($all_users_loc[0][co_latitude])?> 
 
<div id="ressearch"></div> 
 

 

 
//this is the result 
 
[{"co_adresse":"adresse 1","co_longitude":"10.19959870","co_latitude":"36.84540516"},{"co_adresse":"adresse","co_longitude":"33.58555244","co_latitude":"10.33333330"}] 36.84540516

Answer 1

試試這個：

<?php 

    $json = '[{ 
     "co_adresse": "adresse 1", 
     "co_longitude": "10.19959870", 
     "co_latitude": "36.84540516" 
    }, { 
     "co_adresse": "adresse", 
     "co_longitude": "33.58555244", 
     "co_latitude": "10.33333330" 
    }]'; 
    $all_users_loc = json_decode($json, true); 


    $arrary = []; 
    foreach($all_users_loc as $key) { 
     $arrary[] = array(($key['co_latitude']*1), ($key['co_longitude']*1)); 


    } 
?> 




<script> 


function markersOnMap() { 

    var map; 
    var bounds = new google.maps.LatLngBounds(); 
    var mapOptions = { 
     mapTypeId: 'roadmap' 
    }; 

    // Display a map on the web page 
    map = new google.maps.Map(document.getElementById("ressearch"), mapOptions); 

    map.setTilt(50); 

    // Multiple markers location, latitude, and longitude 
    var markers = <?php echo json_encode($array) ;?>; 

    /*  var markers = [ 
     [40.671531, -73.963588], 
     [40.672587, -73.968146], 
     [40.665588, -73.965336] 
    ]; 
     */ 
    // Info window content 
    var infoWindowContent = [ 
     ['<div class="info_content">' + 
     '<h3>Brooklyn Museum</h3>' + 
     '<p>The Brooklyn Museum is an art museum located in the New York City borough of Brooklyn.</p>' + '</div>'], 
     ['<div class="info_content">' + 
     '<h3>Brooklyn Public Library</h3>' + 
     '<p>The Brooklyn Public Library (BPL) is the public library system of the borough of Brooklyn, in New York City.</p>' + 
     '</div>'], 
     ['<div class="info_content">' + 
     '<h3>Prospect Park Zoo</h3>' + 
     '<p>The Prospect Park Zoo is a 12-acre (4.9 ha) zoo located off Flatbush Avenue on the eastern side of Prospect Park, Brooklyn, New York City.</p>' + 
     '</div>'] 
    ]; 

    // Add multiple markers to map 
    var infoWindow = new google.maps.InfoWindow(), marker, i; 

    // Place each marker on the map 
    for(i = 0; i < markers.length; i++) { 
     var position = new google.maps.LatLng(markers[i][0], markers[i][1]); 
     bounds.extend(position); 
     marker = new google.maps.Marker({ 
      position: position, 
      map: map, 
      title: markers[i][0] 
     }); 

     // Add info window to marker  
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infoWindow.setContent(infoWindowContent[i][0]); 
       infoWindow.open(map, marker); 
      } 
     })(marker, i)); 

     // Center the map to fit all markers on the screen 
     map.fitBounds(bounds); 
    } 

    // Set zoom level 
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
     this.setZoom(14); 
     google.maps.event.removeListener(boundsListener); 
    }); 

} 

// Load initialize function 
google.maps.event.addDomListener(window, 'load', markersOnMap);  
</script>