【发布时间】：2012-05-03 13:11:31
【问题描述】：
我在我的 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;
}
}
【问题讨论】：
-
你能提供更多细节吗？问题是标记都在同一个位置并且它们应该具有不同的值吗？或者所有的标记都实际上在同一个位置并且有许多标记在彼此的顶部会产生不受欢迎的显示？能否附上链接或图片？
-
或者：从浏览器而不是服务器发布代码，因为是浏览器完成了所有工作。或者发个链接。例如，您似乎没有为
Grid_Table分配有用的值。 -
标记应该在不同的位置，因为它们是相同的位置。应该有 4 个标记，但 mutch 超过 4 个。
-
您是否尝试过遍历数据并将其转储出来以查看它是否包含您期望的内容？您可能有数据问题或某种循环逻辑问题。
标签： javascript asp.net google-maps-api-3