<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>百度地圖</title> <style type="text/css"> html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0px; padding: 0px; } #container { height: 100%; } </style> <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function zomeOut() { map.zoomTo(map.getZoom() - 1); } function zomeIn() { map.zoomTo(map.getZoom() + 1); } /*--擷取網頁傳遞的參數--*/ function request(paras) { var url = location.href; var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&"); var paraObj = {} for (i = 0; j = paraString[i]; i++) { paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length); } var returnValue = paraObj[paras.toLowerCase()]; if (typeof (returnValue) == "undefined") { return ""; } else { return returnValue; } } </script> <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script></head><body> <div id="container"> </div> <script type="text/javascript"> var map = new BMap.Map("container"); var maptype = 0; var city = "100"; var querytype = "yq"; initmap(); fun1(); function fun1() { var servicefunc = ""; if (querytype == "yq") servicefunc = "getylzlist"; else if (querytype == "sq") servicefunc = "getswzlist"; else if (querytype == "yj") servicefunc = "test"; else if (querytype == "hd") { servicefunc = "gethdlist"; } else if (querytype == "df") { servicefunc = "getdflist"; } else if (querytype == "bz") { servicefunc = "getbzlist"; } else if (querytype == "sk") { servicefunc = "getsklist"; } else if (querytype == "dsk") { servicefunc = "getdsklist"; } $.ajax({ url: "../Service.asmx/" + servicefunc, type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", data: "{city:'" + city + "'}", success: function (json) { var tmp = json.d; addPoints(tmp); }, error: function (x, e) { alert('錯誤:' + x.responseText); }, complete: function (x) { } }); } function initmap() { querytype = request("type"); city = request("city"); map.centerAndZoom(new BMap.Point(118.472951, 30.343178), 11); } function ygmap() { if (maptype == 0) { maptype = 1; //設定衛星圖為底圖 map = new BMap.Map("container", { mapType: BMAP_HYBRID_MAP }); } else { maptype = 0; map = new BMap.Map("container"); } map.centerAndZoom(new BMap.Point(118.472951, 30.343178), 11); fun1(); } function clearmap() { map.clearOverlays(); initmap(); } function addLine(pps) { var tt = new Array(); //定義一數組 var tts = pps.split(";"); var count = tts[0]; if (count == 0) { alert('當日暫無預警！'); return; } if (count > 12) count = 12; for (k = 1; k < count; k++) { var strs = new Array(); //定義一數組 var points = []; strs = tts[k].split("*"); //字元分割 var yl = strs[0]; for (i = 1; i < strs.length; i++) { var xys = new Array(); xys = strs[i].split(","); //分割後的字元輸出 points.push(new BMap.Point(xys[1], xys[0])); } var polyline = new BMap.Polyline(points, { strokeColor: "red", strokeWeight: 6 }); map.addOverlay(polyline); } } function addPoints(pps) { var tt = new Array(); //定義一數組 var tts = pps.split(";"); var count = tts.length; for (k = 0; k < count; k++) { var xys = new Array(); xys = tts[k].split(","); // 分割後的字元輸出 var inf = xys[0] + ':' + xys[1]; var telnum = ""; if ((querytype == 'sq') || (querytype == 'yq')) { telnum = xys[4]; } addMarker(xys[3], xys[2], inf, querytype, telnum); } } // 複雜的自訂覆蓋物 function ComplexCustomOverlay(point, text, mouseoverText) { this._point = point; this._text = text; this._overText = mouseoverText; } ComplexCustomOverlay.prototype = new BMap.Overlay(); ComplexCustomOverlay.prototype.initialize = function (map) { this._map = map; var div = this._div = document.createElement("div"); div.style.position = "absolute"; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); if (maptype == 0) { div.style.color = "red"; } else div.style.color = "yellow"; div.style.height = "18px"; div.style.padding = "2px"; div.style.lineHeight = "18px"; div.style.whiteSpace = "nowrap"; div.style.MozUserSelect = "none"; div.style.fontSize = "12px" var span = this._span = document.createElement("span"); div.appendChild(span); span.appendChild(document.createTextNode(this._text)); var that = this; var arrow = this._arrow = document.createElement("div"); arrow.style.background = "url(../report/img/" + querytype + ".png) no-repeat"; arrow.style.position = "absolute"; arrow.style.width = "25px"; arrow.style.height = "25px"; arrow.style.top = "22px"; arrow.style.left = "10px"; arrow.style.overflow = "hidden"; map.getPanes().labelPane.appendChild(div); return div; } ComplexCustomOverlay.prototype.draw = function () { var map = this._map; var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px"; this._div.style.top = pixel.y - 40 + "px"; } var telnums; var titles; function addMarker(x, y, title2, mapname, telnum) { var point = new BMap.Point(x, y); telnums = telnum; // 建立表徵圖對象 var myIcon = new BMap.Icon("../report/img/" + mapname + ".png", new BMap.Size(32, 32), { // 指定定位位置。 // 當標註顯示在地圖上時，其所指向的地理位置距離表徵圖左上 // 角各位移10像素和25像素。您可以看到在本例中該位置即是 // 表徵圖中央下端的尖角位置。 anchor: new BMap.Size(10, 25), // 設定圖片位移。 // 當您需要從一幅較大的圖片中截取某部分作為標註表徵圖時，您 // 需要指定大圖的位移位置，此做法與css sprites技術類似。 imageOffset: new BMap.Size(0, 0) // 設定圖片位移 }); // 建立標註對象並添加到地圖 var marker = new BMap.Marker(point, { icon: myIcon }); titles = new Array(); titles = title2.split(":"); //字元分割 var titletmp = titles[0]; if (titles.length > 1) if ((mapname == 'sq') || (mapname == 'yq')) titletmp = titletmp + " " + titles[1]; var label = new BMap.Label(titletmp, { "offset": new BMap.Size(-15, 20) }); if (mapname == 'sq') label = new BMap.Label(titletmp, { "offset": new BMap.Size(-15, -20) }); var myCompOverlay = new ComplexCustomOverlay(point, titletmp, titletmp); if (mapname != 'blue' && mapname != 'red' && mapname != 'pink') { marker.addEventListener("click", function () { var url = "protocol://|" + querytype + ":" + city + ":" + telnums; if ((querytype != 'sq') && (querytype != 'yq')) url = "protocol://|" + querytype + ":" + city + ":" + titles[1]; //document.location = url; }); } else { } map.addOverlay(marker); map.addOverlay(myCompOverlay); //label.setStyle({ color: "red", fontSize: "12px" }) /* label.setStyle({ borderColor: "#808080", color: "#333", fontSize: "12px", cursor: "pointer" });*/ } </script></body></html>
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Text;public partial class googlemap_demo : System.Web.UI.Page{ string city = "100"; protected void Page_Load(object sender, EventArgs e) { this.Page.LoadComplete += new EventHandler(Page_LoadComplete); } void Page_LoadComplete(object sender, EventArgs e) { if (!this.IsPostBack) { if (this.Request.QueryString["type"] != null) { if (this.Request.QueryString["city"] != null) { city = this.Request.QueryString["city"]; } Service service = new Service(); string res = ""; string type = this.Request.QueryString["type"]; if (type == "sw") { res = service.getswzlist(city); } else if (type == "yq") { res = service.getylzlist(city); } else if (type == "sq") { res = service.getsklist(city); } else if (type == "hd") { res = service.gethdlist(city); } else if (type == "df") { res = service.getdflist(city); } else if (type == "bz") { res = service.getbzlist(city); } else if (type == "dsk") { res = service.getdsklist(city); } string[] tmps = res.Split(';'); StringBuilder sb = new StringBuilder(); for (int i = 0; i < tmps.Length; i++) { string[] tmp = tmps[i].Split(','); if ((type == "yl") || (type == "sw")) sb.Append(tmp[3] + "," + tmp[2] + "," + tmp[0] + ":" + tmp[1] + "," + type); else sb.Append(tmp[3] + "," + tmp[2] + "," + tmp[0] + "," + type); if (i < tmps.Length - 1) sb.Append(";"); } ClientScript.RegisterStartupScript(this.GetType(), "", "<script>addPoints('" + sb.ToString() + "');</script>"); } } }}
using System;using System.Collections.Generic;using System.Web;using System.Data;using System.Web.Services;using System.Text;using MouStudio.Contour;using NumericalRecipes;[WebService(Namespace = "http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]// 若要允許使用 ASP.NET AJAX 從指令碼中調用此 Web 服務，請取消對下行的注釋。[System.Web.Script.Services.ScriptService]public class Service : System.Web.Services.WebService{ public Service() { //如果使用設計的組件，請取消注釋以下行 //InitializeComponent(); } #region 2012-07-10 修改水位站和雨量站 [WebMethod] public string getswzlist(string city) { USTC.DM.AHSK app = new USTC.DM.AHSK(); DataSet ds = app.getsql(@"select t.STNM,t1.Z,t.LTTD,t.LGTD,t1.STCD,t1.TM from ST_STBPRP_B t, ST_RIVER_R t1 where t.STCD=t1.STCD and t1.TM in ( select MAX(TM) from ST_RIVER_R where STCD=t.STCD ) order by t.STCD desc;"); StringBuilder sb = new StringBuilder(); for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { sb.Append(ds.Tables[0].Rows[i][0].ToString() + ","); sb.Append(ds.Tables[0].Rows[i][1].ToString() + ","); sb.Append(ds.Tables[0].Rows[i][2].ToString() + ","); sb.Append(ds.Tables[0].Rows[i][3].ToString() + ","); sb.Append(ds.Tables[0].Rows[i][4].ToString()); if (i < ds.Tables[0].Rows.Count - 1) sb.Append(";"); } return sb.ToString(); } [WebMethod] public string getylzlist(string city) { USTC.DM.AHSK app = new USTC.DM.AHSK(); DataSet ds = app.getsql(@"select t.STNM,t1.DRP,t.LTTD,t.LGTD,t1.STCD,t1.TM from ST_STBPRP_B t, ST_PPTN_R t1 where t.STCD=t1.STCD and t1.TM in ( select MAX(TM) from ST_PPTN_R where STCD=t.STCD ) order by t.STCD desc;"); StringBuilder sb = new StringBuilder(); for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { sb.Append(ds.Tables[0].Rows[i][0].ToString() + ","); sb.Append(ds.Tables[0].Rows[i][1].ToString() + ","); sb.Append(ds.Tables[0].Rows[i][2].ToString() + ","); sb.Append(ds.Tables[0].Rows[i][3].ToString() + ","); sb.Append(ds.Tables[0].Rows[i][4].ToString()); if (i < ds.Tables[0].Rows.Count - 1) sb.Append(";"); } return sb.ToString(); } #endregion}
效果如：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
