谷歌地图多标记信息窗口不起作用

时间:2011-09-28 04:48:56

标签: c# javascript jquery asp.net

我在网页上使用Google Maps API。我尝试使用信息窗口向页面添加多个标记。标记添加正常,但信息窗口都有最后一个标记的信息。任何想法?

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="http://testserver/se1/WebServices/ShelterWebService.asmx" />
        </Services>
    </asp:ScriptManager>

                <asp:LinkButton ID="BtnHome" runat="server" onclick="BtnHome_Click">Home</asp:LinkButton>

<div id="map_canvas"></div>

<script type="text/javascript">
    var geocoder;
    var map;
    var addresses;

    function GetShelters() {
        ShelterExpress.WebServices.ShelterWebService.GetShelters('', OnGetSheltersComplete);
    }

    function OnGetSheltersComplete(retValue) {
        addresses = new Array();

        for (x in retValue) {
            addresses.push(retValue[x]["Address"]);
        }

        GenerateMap();
    }

    function GenerateMap() {
        /* Create the geocoder */
        geocoder = new google.maps.Geocoder();
        /* Some initial data for the map */
        mapOptions = {
            zoom: 10
        , center: new google.maps.LatLng(0, 0)
        , mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        //var infowindow = new google.maps.InfoWindow();
        var marker, i;

        if (geocoder) {
             for (var item in addresses){
                geocoder.geocode({ 'address': addresses[item] }, function(results, status) {

                    if (status == google.maps.GeocoderStatus.OK) {
                        /* Position the map */
                        map.panTo(results[0].geometry.location);
                        /* Put a marker */
                        marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            title: addresses[item]
                        });

                        var infowindow = new google.maps.InfoWindow({ content: addresses[item] });
                        infowindow.open(map, marker);

                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open(map, marker);
                        });
                    }
                });
            }
        }    
    }

    $(document).ready(function() {

        GetShelters();                
    });

1 个答案:

答案 0 :(得分:0)

我猜你已经复制了一个对象或一个数组。您需要提供有关地址[item]

的更多信息

在javascript中,复制类似字符串或布尔值的内容会产生实际副本,但复制对象或数组only gives a reference

var foo = [1, 2, 3];
var bar = foo;
bar[1] = 5;
alert(foo[1]);
// alerts 5

编辑新信息:如果你加载了jQuery,克隆JS对象的一种快捷方法是使用$ .extend()

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

对于数组,您可以使用javascript&#39; s slice()

a = [1];
b = a.slice();

这将取决于retValue [x] [&#34;地址&#34;] IS以及您加载的库。