0

我有一个谷歌地图，在我的信息窗口中它显示了信息窗口中的所有地址。当我将 php 变量从我的 foreach 数组中移出时，它只显示数组中的最后一项。我是否错过了完成数组或没有在 infoWindow 函数中正确声明它？

这是我的支持代码：

更新的代码现在拉入 MARKER_0、MARKER_1 等，而不是地址 (a,b,c,d)。

<script type="text/javascript">
    $(document).ready(function() {
    //create an array to store lat n lon and type
    var lat= [];  
    var lon= [];  
    var type= [];
    var address= []; 

    var restaurant = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|FF0000|000000';
    var bar = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000';

    var x=0;    //to store index for looping  
    var map = null; //create a map and define it's value to null  
    var markerArray = []; //create a global array to store markers  
    var infowindow; //create infowindow to show marker information  


    //looping for getting value from database using php  
    <?php foreach($latlong as $row): ?>
        lat.push(<?php echo $row['lat']; ?>);  
        lon.push(<?php echo $row['long']; ?>);
        type.push(<?php echo $row['type']; ?>);
        address.push("<?php echo $row['address']; ?>");
     x++; 
    <?php endforeach; ?>

        function initialize() {  
            //set center from the map  
            var myOptions = {  
                zoom: 10,  
                center: new google.maps.LatLng(lat[0], lon[0]),  
                mapTypeControl: true,  
                mapTypeControlOptions: {  
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU  
                },  
                navigationControl: true,  
                mapTypeId: google.maps.MapTypeId.ROADMAP  
            }  
            //make a new map  
            map = new google.maps.Map(document.getElementById("map"), myOptions);  


            //define value and size for infowindow  
            infowindow = new google.maps.InfoWindow({  
                size: new google.maps.Size(150, 50)

            });  

            // Add markers to the map  
            // Set up markers based on the number of elements within the array from database  
            for (var i = 0; i < x; i++) { 
                createMarker(new google.maps.LatLng(lat[i], lon[i]), type[i],address[i], 'marker_'+i);  
                ;
            }  
        }  
    function createMarker(latlng, type, id, address){
        var marker = new google.maps.Marker({  
            position: latlng,
            map: map,
            icon: type,
            id: id,
            address:address
        });
        google.maps.event.addListener(marker, 'mouseover', onMarkerClick);  
        markerArray.push(marker); //push local var marker into global array  
    }

    //create a function that will open infowindow when a marker is clicked  
       var onMarkerClick = function(latlng) {  
          var marker = this;  
          var latLng = marker.getPosition(); 
          infowindow.setContent('<h3>Marker address is:</h3>'+ marker.address +'</div>');
          infowindow.open(map, marker, marker.address);

        }; 


    window.onload = initialize;     
    });
</script>

在我的脚本部分的萤火虫中，数据是这样输出的，所以我知道它正在提取正确的信息！

//循环使用php从数据库中获取值

lat.push(lat);
lon.push(lng);
type.push(restaurant);
address.push("A");
x++;
lat.push(lat);
lon.push(lng);
type.push(bar);
address.push("B");
x++;
lat.push(lat);
lon.push(lng);
type.push(restaurant);
address.push("C");
x++;
lat.push(lat);
lon.push(lng);
type.push(bar);
address.push("D");
x++;

任何帮助将非常感激。

4

1 回答 1

1

您将 4 个参数传递给您的 createMarker 函数：

createMarker(new google.maps.LatLng(lat[i], lon[i]), type[i], address[i], 'marker_'+i);

但是你只使用其中的 3 个，

function createMarker(latlng, type, id){

该函数声明不应该是：

function createMarker(latlng, type, address, id){

然后您可以将地址作为属性添加到您的标记中：

var marker = new google.maps.Marker({  
            position: latlng,
            map: map,
            icon: type,
            id: id,
            address: address
        });

然后您可以像这样引用它：

var onMarkerClick = function(latlng) {  
          var marker = this;  
          var latLng = marker.getPosition(); 
          infowindow.setContent('<h3>Marker address is:</h3>'+ marker.address +'</div>');
          infowindow.open(map, marker, marker.address);
        };
于 2013-06-21T15:10:09.213 回答