asp.net google maps在datagrid中打开infowindow外部链接

时间：2015-03-15 14:59:33

标签： c# asp.net google-maps

我正在建立一个网站并使用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;">' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + '<br/>' + '</td>'
                   + '<td style="width: 40% text-align: center;">' + '<img' + ' id="graficar " ' + 'src="' + 'Imagen/logo_1.png' + '" alt=""' +' />' + '&#32;'
                   + '<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=""' + ' />' + '&#32;'
             + '<td>' + 'Motor: ' + '<img' + ' id="graficar " ' + 'src="' + 'MapImagen/green-ball.png' + '" alt=""' + ' />' + '&#32;'
             + '<td>' + 'Presion: ' + '<img' + ' id="graficar " ' + 'src="' + 'MapImagen/red-ball.png' + '" alt=""' + ' />' + '&#32;'
         //    + '<td>' + 'Bomba: ' + '<img' + ' id="graficar " ' + 'src="' + 'MapImagen/green-ball.png' + '" alt=""' +' />' + '&#32;'
           + '</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');

  });

0 个答案:

没有答案
相关问题
最新问题