GoodMapAPI小试

今天做一个ＧＩＳ页面

其中点击左边的Ａ标签时右边的地图动态的显示对应的InfoWindow

弄了半天

代码如下：

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GisShow.aspx.cs" Inherits="Portal.GisShow" %>
  2 <%@ Register src="UserControl/Top.ascx" tagname="Top" tagprefix="uc1" %>
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head id="Head1" runat="server">
  7     <title>GIS展示</title>
  8      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB0Hr5k4z_ARI93bFZ28M6RCQ3qYlL3XyU&sensor=false">
  9     </script>
 10     <script type="text/javascript">
 11         var Latlngs = [{ Jin: 112.6917423, Wei: 34.577982 }, { Jin: 110.993487, Wei: 37.997283 }, { Jin: 113.726848, Wei: 37.610143 }, { Jin: 114.355833, Wei: 34.254722}];
 12         var myLatlngs = [];
 13         var markers = [];
 14         var icons = ["images/MapIcon/letter_a.png", "images/MapIcon/letter_b.png", "images/MapIcon/letter_c.png", "images/MapIcon/letter_d.png"];
 15         var titles = ["试验点A", "试验点B", "试验点C", "试验点D"];
 16         var map;
 17         var lastInfWnd = null;
 18         function initialize() {
 19             var myLatlng0 = new google.maps.LatLng(Latlngs[0].Wei, Latlngs[0].Jin);
 20             //alert(0);
 21             var mapOptions = {
 22                 zoom: 5,
 23                 center: myLatlng0,
 24                 mapTypeId: google.maps.MapTypeId.ROADMAP
 25             }
 26 
 27             map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 28 
 29             var dotUlHtml = "";
 30             for (var i = 0; i < Latlngs.length; i++) {
 31                 //alert(Latlngs[i].Jin);
 32                 var myLatlng = new google.maps.LatLng(Latlngs[i].Wei, Latlngs[i].Jin);
 33                 myLatlngs.push(myLatlng);
 34                 var marker = new google.maps.Marker({
 35                     position: myLatlngs[i],
 36                     map: map,
 37                     icon: icons[i],
 38                     title: titles[i]
 39                 });
 40                 markers.push(marker);
 41                 ShowInfo(i);
 42                 dotUlHtml += "<li><img style='cursor:pointer;'  onclick='ShowInfoBya(" + i + "); return false;'  src='" + icons[i] + "' /><a href='' onclick='ShowInfoBya(" + i + "); return false;'>" + titles[i] + "</a></li>";
 43             }
 44             document.getElementById("dotUl").innerHTML = dotUlHtml;
 45         }
 46 
 47         google.maps.event.addDomListener(window, 'load', initialize);
 48 
 49         function ShowInfo(j) {
 50             //alert(j);
 51             google.maps.event.addListener(markers[j], 'click', function () {
 52                 ShowInfoBya(j);
 53             });
 54         }
 55 
 56         function ShowInfoBya(j) {
 57             //alert(j);
 58             if (lastInfWnd) {
 59                 lastInfWnd.close();
 60             }
 61             var contentString = '<div id="content">' +
 62       '<h1 id="firstHeading" class="firstHeading">' + titles[j] + '</h1>' +
 63       '<div id="bodyContent">' +
 64       '内容:<a target="_blank" href="AnSolution2.aspx">C两优396</a></p>' +
 65       '</div>' +
 66       '</div>';
 67 
 68             var infowindow = new google.maps.InfoWindow();
 69             infowindow.setContent(contentString);
 70             infowindow.open(map, markers[j]);
 71             lastInfWnd = infowindow;
 72         }
 73     </script>
 74 
 75     <style type="text/css">
 76        #HeaderUl
 77         {
 78             text-align:center; 
 79             }
 80         #HeaderUl li
 81         {
 82              width:40%;
 83             display:inline-table;
 84              
 85         }
 86          .clearfix:after {
 87     content: ".";
 88     display: block;
 89     height: 0;
 90     clear: both;
 91     visibility: hidden;
 92 }
 93  
 94 * html .clearfix {zoom: 1;}
 95     
 96     </style>
 97 </head>
 98 <body>
 99     <form id="form1" runat="server">
100     
101     <div style=" margin:auto; width:1000px;">
102        
103        
104         <uc1:Top ID="Top1" runat="server" />
105        
106        <div style=" width:100%;">
107             <p>
108                当前位置： » GIS 展示
109             </p>
110         </div>
111         <div>
112             <div style=" width:150px; float:left;">
113             试验点
114             <ul id="dotUl">                               
115                <%-- <li>
116                     试验点1
117                 </li>
118                 <li>
119                     试验点2
120                 </li>
121                 <li>
122                     试验点3
123                 </li>
124                 <li>
125                     试验点4
126                 </li>--%>
127             </ul>
128             </div>
129             <div id="map-canvas" style=" width:850px; height:400px;"></div>
130         </div>
131     </div>
132    
133     </form>   
134    
135 </body>
136 </html>
View Code

 

 

 

posted on 2013-05-17 15:53  thegavincheng  阅读(173)  评论(0)  编辑  收藏  举报