从 php 控制器动态添加标记

Question

我正在使用谷歌地图 API，并希望动态创建标记。我正在使用 Zend 框架，这是我的代码的一部分。

谁能帮我获取这个对象以获取标记，然后在地图上显示它们？

<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>