1

我在我的 asp.net 站点的 GridView 中有 GoogleMaps (api v3) 标记坐标。我想在地图上显示这些标记。问题是标记彼此重叠。所有标记都在第一个标记坐标上。我在 GridView 中有更多的标记（标记是可拖动的）。

//.aspx
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=xyz"></script>
<script type="text/javascript">
    //google maps API v3

    //változók

    var GMLat = '<%= Label_GMLat.Text %>';
    var GMLng = '<%= Label_GMLng.Text %>';
    var GMHirdetesID = [];
    var GMLatLng = [];
    var GMKep = [];
    var GMTitle = [];
    var GMIngatlanCim = [];
    var GMSzoveg = [];
    var Grid_Table = '';
    var hirdetesid = '';
    var lat = '';
    var lng = '';
    var kep = '';
    var title = '';
    var ingatlancim = '';
    var szoveg = '';
    var latlng_1 = new google.maps.LatLng(49, 17);    //(GMLat, GMLng);
    var marker_1_pos = latlng_1;
    var map;
    var marker_1;
    var infowindow_1;
    var infowindow_1_off = true;

    //funkciók

    //init
    function initialize() {
        var myOptions =
        {
            zoom: 8,
            center: latlng_1,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions:
            {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                poistion: google.maps.ControlPosition.TOP_RIGHT,
                mapTypeIds: [google.maps.MapTypeId.ROADMAP,
                             google.maps.MapTypeId.TERRAIN,
                             google.maps.MapTypeId.HYBRID,
                             google.maps.MapTypeId.SATELLITE]
            },
            navigationControl: true,
            navigationControlOptions:
            {
                style: google.maps.NavigationControlStyle.SMALL   //ZOOM_PAN; SMALL; ANDROID
            },
            scaleControl: true,
            disableDoubleClickZoom: true,
            draggable: true,
            streetViewControl: true,
            draggableCursor: 'move'
        }

        //térkép
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        Grid_Table = document.getElementById('<%= GridView1.ClientID %>');
        //tömbök föltöltése
        for (var row = 1; row < Grid_Table.rows.length; row++) {
            for (var col = 0; col < Grid_Table.rows[row].cells.length; col++) {
                if (col == 0) {
                    if (document.all)
                        hirdetesid = Grid_Table.rows[row].cells[col].innerText;
                    else
                        hirdetesid = Grid_Table.rows[row].cells[col].textContent;
                }
                if (col == 3) {
                    lat = '';
                    if (document.all)
                        lat = Grid_Table.rows[row].cells[col].innerText;
                    else
                        lat = Grid_Table.rows[row].cells[col].textContent;
                }
                if (col == 4) {
                    lng = '';
                    if (document.all)
                        lng = Grid_Table.rows[row].cells[col].innerText;
                    else
                        lng = Grid_Table.rows[row].cells[col].textContent;
                }
                if (col == 5) {
                    if (document.all)
                        ingatlancim = Grid_Table.rows[row].cells[col].innerText;
                    else
                        ingatlancim = Grid_Table.rows[row].cells[col].textContent;
                }
                if (col == 6) {
                    if (document.all)
                        title = Grid_Table.rows[row].cells[col].innerText;
                    else
                        title = Grid_Table.rows[row].cells[col].textContent;
                }
                if (col == 7) {
                    if (document.all)
                        szoveg = Grid_Table.rows[row].cells[col].innerText;
                    else
                        szoveg = Grid_Table.rows[row].cells[col].textContent;
                }
                if (col == 8) {
                    if (document.all)
                        kep = Grid_Table.rows[row].cells[col].innerText;
                    else
                        kep = Grid_Table.rows[row].cells[col].textContent;
                }
                GMHirdetesID.push(hirdetesid);
                GMLatLng.push(new google.maps.LatLng(GMLat, GMLng));
                GMKep.push(kep);
                GMTitle.push(title);
                GMIngatlanCim.push(ingatlancim);
                GMSzoveg.push(szoveg);
            }
            //align(GMLatLng);
            //markerek fölrakása
                for (var i = 0; i <= GMHirdetesID.length; i++) {
                    marker = new google.maps.Marker({
                        map: map,
                        position: GMLatLng[i],
                        animation: google.maps.Animation.DROP,
                        draggable: true
                    });

                    (function (i, marker) {
                        google.maps.event.addListener(marker, 'click', function () {
                            if (!infowindow) {
                                infowindow = new google.maps.InfoWindow();
                            }
                            infowindow.setContent("Message " + i);
                            //infowindow.SetSize(300, 200);
                            infowindow.open(map, marker);
                        });
           /**/         google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker) });
                    })(i, marker);
            }
        }
    // google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker) });
    google.maps.event.addListener(map, 'click', function () { infowindow.close() });
    }
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

    <div style=" width: 1000px; margin-right: auto; margin-left: auto;">
        Térkép:
        <br />
        <br />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="HirdetesID" DataSourceID="SqlDataSource1" Width="1000px">
            <Columns>
                <asp:BoundField DataField="HirdetesID" HeaderText="HirdetesID" ReadOnly="True"
                    SortExpression="HirdetesID" />
                <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
                <asp:BoundField DataField="Coord" HeaderText="Coord" SortExpression="Coord" />
                <asp:BoundField HeaderText="Lat" SortExpression="Lat" NullDisplayText=" " />
                <asp:BoundField HeaderText="Lng" SortExpression="Lng" NullDisplayText=" " />
                <asp:BoundField DataField="IngatlanCim" HeaderText="IngatlanCim" 
                    SortExpression="IngatlanCim" />
                <asp:BoundField DataField="GoogleMapsTitle" HeaderText="GoogleMapsTitle" 
                    SortExpression="GoogleMapsTitle" />
                <asp:BoundField DataField="GoogleMapsSzoveg" HeaderText="GoogleMapsSzoveg" 
                    SortExpression="GoogleMapsSzoveg" />
                <asp:BoundField DataField="Prp_keputvonal_thumb" 
                    HeaderText="Prp_keputvonal_thumb" SortExpression="Prp_keputvonal_thumb" >
                </asp:BoundField>
            </Columns>
            <EditRowStyle Width="1000px" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:PROPYTESZT_ConnectionString1 %>" 
            SelectCommand="SELECT tblGoogleMapsCoord.HirdetesID, tblGoogleMapsCoord.Email, tblGoogleMapsCoord.Coord, tblGoogleMapsCoord.IngatlanCim, tblGoogleMapsCoord.GoogleMapsTitle, tblGoogleMapsCoord.GoogleMapsSzoveg, Prp_kep.Prp_keputvonal_thumb FROM tblGoogleMapsCoord LEFT OUTER JOIN Prp_kep ON tblGoogleMapsCoord.HirdetesID = Prp_kep.Prp_hirdetes WHERE (Prp_kep.Prp_GoogleMapsKep = N'igen') OR (Prp_kep.Prp_GoogleMapsKep IS NULL)">
        </asp:SqlDataSource>
        <br />
        <br />
    </div>
    <div id="map_canvas" style="width: 800px; height: 600px; margin-right: auto; margin-left: auto;"></div>
    <div style="width: 800px; text-align: left; margin-right: auto; margin-left: auto;">
        GMLat: <asp:Label ID="Label_GMLat" runat="server" Text="Label_GMLat"></asp:Label><br />
        GMLng: <asp:Label ID="Label_GMLng" runat="server" Text="Label_GMLng"></asp:Label><br />
        GMTitle: <asp:Label ID="Label_GMTitle" runat="server" Text="" Visible="True"></asp:Label><br />
        GMIngatlanCim: <asp:Label ID="Label_GMIngatlanCim" runat="server" Text="" Visible="True"></asp:Label><br />
        GMSzoveg: <asp:Label ID="Label_GMSzoveg" runat="server" Text="" Visible="True"></asp:Label><br />
        GMLink: <asp:Label ID="Label_GMLink" runat="server" Text="" Visible="True"></asp:Label><br />
        GMKep: <asp:Label ID="Label_GMKep" runat="server" Text="" Visible="True"></asp:Label><br />
        MegjelenitesAdatok(error): <asp:Label ID="Label_MegjelenitesAdatok" runat="server" Text="" Visible="True"></asp:Label><br />
    </div>

//.aspx.cs
    protected void Page_Load(object sender, EventArgs e)
    {
        string HirdetesID = "";
        string GMCoord = "";
        string GMLat = "";
        string GMLng = "";
        int GMindex;
        int test1;
    /*GridView1 Lat és Lng oszlopainak feltöltése Coord oszlopa alapján*/
        for (int i = 1; i < GridView1.Rows.Count; i++)
        {
            GMCoord = GridView1.Rows[i].Cells[2].Text;
            GMCoord = GMCoord.Replace("(", "");
            GMCoord = GMCoord.Replace(")", "");
            GMLat = GMCoord;
            GMLng = GMCoord;
            GMindex = GMCoord.IndexOf(",");
            test1 = GMLat.Length - GMindex;
            GMLat = GMLat.Remove(GMindex, (GMLat.Length - GMindex));
            GMLng = GMLng.Remove(0, GMindex+1);
            GridView1.Rows[i].Cells[3].Text = GMLat;
            GridView1.Rows[i].Cells[4].Text = GMLng;
        }
    }
4

2 回答 2

1

更新行“GMLatLng.push(new google.maps.LatLng(GMLat, GMLng));” 到“GMLatLng.push（新 google.maps.LatLng（lat，lng））；”

于 2012-05-04T13:06:03.590 回答
0

你试过了吗？

for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            latlngbounds.extend(marker.position);
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);
于 2015-11-01T13:56:47.740 回答