我正在建立一个网站并使用ASP.NET和谷歌地图。 我在地图的左边有一个数据网格，数据网格有标记的名称和一个用于与地图建立链接的按钮。 当我点击数据网格时，我需要打开一个infowindows并设置zoom = 13。
生成地图的代码是：
var Dibujar = function () {
var mapOptions = {
center: new google.maps.LatLng(-33.3, -68.5),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); //dvMap es el canvas donde lo dibuja
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var imagen_Map =parseInt(data.imagen);
if (String(data.imagen) == 1) {
camino_imag = 'imagen/oilpumpjack.png';
}
else {
if (String(data.imagen)== 2) {
camino_imag = 'imagen/refineria.png';
}
else {
camino_imag = 'imagen/factory.png';
};
};
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new StyledMarker({
styleIcon: new StyledIcon(StyledIconTypes.CLASS,
{ color: "2590BA", text: data.title }),
position: myLatlng,
map: map,
icon: camino_imag,
labelContent: i,
title: data.title
});
(function (marker, data) {
var html;
html = "<div class='infoDiv'>"
+ '<br/>' +'<h3 style="text-align: center;">' + data.title + '<br/>' + '</h3>'
+ '<table style="width: 100%;" border="0" cellspacing="0">'
+ ' <tr>'
+ '<td style="width: 10% text-align: center;">' + ' ' + '<br/>' + '</td>'
+ '<td style="width: 40% text-align: center;">' + '<img' + ' id="graficar " ' + 'src="' + 'Imagen/logo_1.png' + '" alt=""' +' />' + ' '
+ '<td style="width: 40% text-align: center;">' + ' lat: ' + data.lat + '<br/>' + ' long: ' + data.lng + '<br/>' + '</td>'
+ '<tr>'
+ '<td colspan="3" style="text-align: left ;">' + ' Desc: ' + data.description + '<br/>' + '</td>'
+ '</tr>'
+ '</table> '
+ '<p>'
+ '<table style="width: 100%;" border="1" cellspacing="0">'
+' <tr>'
+ '<td style="width: 33% text-align: center; vertical-align: middle;">' + 'Valor:' + '1234567' + '</td>'
+ '<td style="width: 33% text-align: center;">' + 'Valor2: ' + '125.6' + '</td>'
+ '<td style="width: 34% text-align: center;">' + 'Valor3: ' + '587' + '</td>'
// + '<td style="width: 25% text-align: center;">' + 'Descrip: ' + 'Abierto' + '</td>'
+ '</tr>'
+ ' <tr>'
+ '<td>' + 'Caudal: ' + '<img' + ' id="graficar " ' + 'src="' + 'MapImagen/green-ball.png' + '" alt=""' + ' />' + ' '
+ '<td>' + 'Motor: ' + '<img' + ' id="graficar " ' + 'src="' + 'MapImagen/green-ball.png' + '" alt=""' + ' />' + ' '
+ '<td>' + 'Presion: ' + '<img' + ' id="graficar " ' + 'src="' + 'MapImagen/red-ball.png' + '" alt=""' + ' />' + ' '
// + '<td>' + 'Bomba: ' + '<img' + ' id="graficar " ' + 'src="' + 'MapImagen/green-ball.png' + '" alt=""' +' />' + ' '
+ '</tr>'
+ '</table> '
+ '<p>'
+ '<table style="width: 100%;" border="0" cellspacing="0">'
+' <tr>'
+ '<td style="text-align: center;" vertical-align: middle >' + '<asp:ImageButton ID="ImageButton55" runat="server" Height="40px" ImageUrl="~/MapImagen/chart-area.png" ToolTip="Graficar" OnClick="ImageButton55_Click" />'
+ '<td style="text-align: center;" vertical-align: middle >' + '<asp:ImageButton ID="ImageButton56" runat="server" Height="40px" ImageUrl="~/MapImagen/config edit.png" ToolTip="Datos" OnClick="ImageButton56_Click" />'
+ '<td style="text-align: center;" vertical-align: middle >' + '<asp:ImageButton ID="ImageButton57" runat="server" Height="40px" ImageUrl="~/MapImagen/comando tools.png" ToolTip="Comandos" OnClick="ImageButton57_Click" />'
+'</tr>'
+'</table>
+ "</div>"
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
// --------------------test, open infowindow------------------------------------
(function (marker) {
google.maps.event.addDomListener(markers[i][0], 'click', function (e) {
google.maps.event.trigger(marker, 'click', {});
});
});
})(marker, data);
}
datagrid的代码是：
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CssClass="auto-style21" DataSourceID="EntityDataSource1" Width="117px" HorizontalAlign="Left" Height="16px" OnRowCreated="GridView1_RowCreated" DataKeyNames="Id" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:BoundField DataField="Nombre" HeaderText="Nombre" ItemStyle-HorizontalAlign="Center" ReadOnly="True" SortExpression="Nombre" >
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="Latitud" HeaderText="Latitud" ReadOnly="True" SortExpression="Latitud" Visible="False" />
<asp:BoundField DataField="Longitud" HeaderText="Longitud" ReadOnly="True" SortExpression="Longitud" Visible="False" />
<asp:CommandField ButtonType="Image" HeaderText="Punto" SelectImageUrl="~/Images/map_marker_1.png" ShowSelectButton="True" >
<ItemStyle HorizontalAlign="Center" />
</asp:CommandField>
<asp:TemplateField HeaderText="Curvas" ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="ImageButtonGraficar" runat="server" CausesValidation="False" CommandName="Delete" ImageUrl="~/Images/graph line 16.png" OnClick="ImageButtonGraficar_Click" Text="Delete" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:BoundField DataField="ContratoId" HeaderText="ContratoId" SortExpression="ContratoId" Visible="False" />
<asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" Visible="False" />
</Columns>
<HeaderStyle BorderWidth="2px" />
<RowStyle VerticalAlign="Middle" />
</asp:GridView>
<div id="dvMap" style="border: thick ridge #3399FF; width: auto; height: 550px; position: relative; z-index: auto; margin-top: 0px; top: 0px; left: 0px;">
<br />
</div>
可以这样做。
非常感谢
问题的解决方案
尝试并查看网络上的代码后，您可以解决问题，我真的帮助了下一页：
Display (Add) Marker on Google Maps on GridView Row Click in ASP.Net
创建一个全局变量，其中收入是标记的数量（索引）。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type = "text/javascript" src = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script>
<script type="text/javascript">
var google_markers = new Array();
在创建每个标记（索引）时加入变量值。
})(marker, data);
google_markers[google_markers.length] = marker;
单击datagrid的单元格，我调用对事件进行triger的函数，调用由索引的ID号标识的标记
$("[Id*=GridView1] td").live("click", function () {
google.maps.event.trigger(google_markers[$(this).parent()[0].rowIndex - 1], 'click');
});