<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="test_Map" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <mce:script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAlGhYpVM6su5zq-51fbnC1hSkENdeMRDZqB5-r_HkH5safdcTMBS0Nf9yw8GbzUZciinCbThKg3rqvQ&hl=zh-CN" mce_src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAlGhYpVM6su5zq-51fbnC1hSkENdeMRDZqB5-r_HkH5safdcTMBS0Nf9yw8GbzUZciinCbThKg3rqvQ&hl=zh-CN" type="text/javascript"></mce:script> <mce:script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js" mce_src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"><!-- </script type="text/javascript"> <script language="javascript" type="text/javascript"> var map; var marker; var counter; var mgr; //迎客松:118.16974997520447 30.131190903173163 //送客松:118.16974997520447 30.131376485743832 function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_c"), { googleBarOptions: { showOnLoad: true }, mapTypes: [G_SATELLITE_MAP, G_NORMAL_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP] }); //搜索框自动展开,属性调用 map.setCenter(new GLatLng(30.131376485743832, 118.16974997520447), 16); map.addControl(new GMapTypeControl()); //加入地图切换按钮控件,控件调用 map.enableScrollWheelZoom(); //鼠标滚轮放大缩小方法,方法调用 map.enableContinuousZoom(); //平滑放大缩小方法 map.enableGoogleBar(); //加个搜索框 map.addControl(new GLargeMapControl()); //添加一个大的方向盘控件 大和小二选一 map.addControl(new GScaleControl()); //添加一个缩放级别控件 map.openInfoWindow(map.getCenter(), document.createTextNode("您好,安徽黄山欢迎你")); //添加信息窗口 map.addControl(new GOverviewMapControl()); //右下角可以拖动的 小窗口 mgr = new MarkerManager(map, { trackMarkers: true }); //点击地图生成图标 标记 // GEvent.addListener(map, "click", function(marker, point) { // if (marker) { // map.removeOverlay(marker);//已经存在则 消失 // } else { // map.addOverlay(new GMarker(point));//否则 创建标记 // } // }); //读取数据 GDownloadUrl("Data/data.xml", function(data, responseCode) { var xml = GXml.parse(data); var markerGroups = { "ancient": [] }; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); this.map.addOverlay(createMarkerevent(latlng, i, markers[i].getAttribute("name"))); } }); } } // 在给定的点上创建带编号的标注 function createMarkerevent(point, number, name) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { if (name == "迎客松") { var html = '<iframe id="Iframe3" style="width:350px;height:400;" src="Data/YingKeSong.htm" mce_src="Data/YingKeSong.htm" class="iframecss" frameborder="0"></iframe>'; marker.openInfoWindowHtml(html, { minTitle: '迎客松' }); } else { var html = '<iframe id="Iframe3" style="width:350px;height:400;" src="Data/SongkeSong.htm" mce_src="Data/SongkeSong.htm" class="iframecss" frameborder="0"></iframe>'; marker.openInfoWindowHtml(html, { minTitle: '送客松' }); } }); return marker; } function createMarker() { this.counter = 0; if (this.counter == 0) { var center = new GLatLng(30.142640694408406, 118.16918134689331); marker = new GMarker(center, { draggable: true }); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); this.map.addOverlay(marker); GEvent.addListener(marker, "dragend", function() { var center = map.getCenter(); tx = center.lng(); ty = center.lat(); alert(""); document.getElementById("Text1").value = tx; document.getElementById("Text2").value = ty; marker.openInfoWindowHtml("经度" + tx + ",纬度" + ty); }); this.counter++; } } function deleteMarker() { //mgr.removeMarker(marker) mgr.clearMarkers(); } //得到标注的 经度和纬度 function save() { var jingdu = document.getElementById("Text1").value; var weidu = document.getElementById("Text2").value; } // --></mce:script> </head> <body οnlοad="initialize()" οnunlοad="GUnload()"> <span>经度</span><input id="Text1" type="text" /> <span>纬度</span><input id="Text2" type="text" /> <input id="Button1" type="button" value="添加风景区" οnclick="createMarker()"/> <form id="form1" runat="server"> <div id="map_c" style="width: 800px; height:550px" ></div> </form> </body> </html> 后台xml代码 <markers> <marker lat="30.131190903173163" name='迎客松' lng="118.16974997520447" /> <marker lat="30.13260132196011" name="送客松" lng="118.16895604133606" /> </markers>