首页 > 代码库 > C# sogou地图API应用总结(二)

C# sogou地图API应用总结(二)

在地图上添加自己想要的功能模块

具体代码如下

 1  var map; 2   window.onload = function () { 3             var myOptions = { 4                 mapControl: false, //关闭默认的控件  5                 mapTypeId: sogou.maps.MapTypeId.ROADMAP 6             } 7             map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); //初始化地图 8  9 10             var homeControlDiv = document.createElement(DIV); //创建11             homeControlDiv.style.position = "absolute";12             homeControlDiv.style.left = "20px";13             homeControlDiv.style.top = "5px";14 15             var homeControl = new HomeControl(homeControlDiv, map); //获取控件16             map.getContainer().appendChild(homeControlDiv); //将控件添加到地图上17 18              19         } 20 function HomeControl(controlDiv, map) {21 22             controlDiv.style.padding = 5px;23 24             //测距功能25             var goHomeText = document.createElement(DIV);26             goHomeText.style.fontFamily = Arial,sans-serif;27             goHomeText.style.backgroundColor = white;28             goHomeText.style.cursor = pointer;29             goHomeText.style.borderStyle = solid;30             goHomeText.style.borderWidth = 1px;31             goHomeText.style.borderColor = black;32             goHomeText.style.fontSize = 12px;33             goHomeText.style.textAlign = center;34             goHomeText.style.float = left;35             goHomeText.style.width = "60px";36             goHomeText.innerHTML = <b>测距</b>;37             controlDiv.appendChild(goHomeText);38 39             //获取坐标40             var SetZbText = document.createElement(DIV);41             SetZbText.style.fontFamily = Arial,sans-serif;42             SetZbText.style.backgroundColor = white;43             SetZbText.style.cursor = pointer;44             SetZbText.style.borderStyle = solid;45             SetZbText.style.borderWidth = 1px;46             SetZbText.style.borderColor = black;47             SetZbText.style.fontSize = 12px;48             SetZbText.style.textAlign = center;49             SetZbText.style.float = left;50             SetZbText.style.width = "60px";51             SetZbText.innerHTML = <b>获取坐标</b>;52             controlDiv.appendChild(SetZbText);53 54             //清空多余描点55             var setHomeText = document.createElement(DIV);56             setHomeText.style.fontFamily = Arial,sans-serif;57             setHomeText.style.backgroundColor = white;58             setHomeText.style.cursor = pointer;59             setHomeText.style.borderStyle = solid;60             setHomeText.style.borderWidth = 1px;61             setHomeText.style.borderColor = black;62             setHomeText.style.fontSize = 12px;63             setHomeText.style.textAlign = center;64             setHomeText.style.float = left;65             setHomeText.style.width = "60px";66             setHomeText.innerHTML = <b>清空</b>;67             controlDiv.appendChild(setHomeText); 68  69         }
View Code

代码效果为

动态为地图添加描点(可后台管理)

 1         var map; 2         var MapZBs,Listener; 3         var num; 4         //获取类的唯一示例 5         function getInstance(a) { 6             a.hasOwnProperty("_instance") || (a._instance = new a); 7             return a._instance 8         } 9         window.onload = function () {10             var myOptions = {11                 mapControl: false, //关闭默认的控件 12                 mapTypeId: sogou.maps.MapTypeId.ROADMAP13             }14             map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); //初始化地图15 16  17             Marks(); //动态添加描点18         } 19         //动态添加描点20         function Marks() {21             //ajax动态调取后台数据22             var marks;23             $.ajax({24                 type: "post",25                 contentType: "application/json",26                 url: "Index.aspx/GetMarks",27                 success: function (data) {28                     FxData(data.d);29                 }30             })31         }32         //描点内容分析33         function FxData(Data) {34             var array = Data.split(|);35             var HtmlCon = "";36             for (var j = 0; j < array.length; j++) {37                 if (array[j].toString() != "") {38                     var Yarr = array[j].split(&);39                     var TypeImages;40                     switch (Yarr[4].toString()) {41                         case "1": TypeImages = "images/b1.png"; break;42                         case "2": TypeImages = "images/o1.png"; break;43                         case "3": TypeImages = "images/r1.png"; break;44                         case "4": TypeImages = "images/z1.png"; break;45                     }46                     HtmlCon += <li id="mark + (j + 1) + " class=""><h3 class="dining" style="background: url( + TypeImages + ) no-repeat;background-size: 30px 30px;"> + Yarr[2] + </h3><div class="priceinfo2"> + Yarr[3] + </div></li>;47                    }48             } 49             document.getElementById(tmd_data).innerHTML = HtmlCon;   50 51             for (var i = 0; i < array.length; i++) {52                 if (array[i].toString() != "") {53                     var Yarr = array[i].split(&);54                     AddMark(Yarr[0], Yarr[1], Yarr[3], Yarr[2], Yarr[4], Yarr[5], i, i);55                 }56             } 57         }58         //生成描点和弹出层59         function AddMark(location, location1,Con,Title,ImgType,Images,mark,num) {  60             var location = new sogou.maps.Point(location, location1); //描点位置61             //var location = new sogou.maps.LatLng(location, location1); 62             var TypeImages = "";63             switch (ImgType) {64                 case "1": TypeImages = "images/b1.png"; break;65                 case "2": TypeImages = "images/o1.png"; break;66                 case "3": TypeImages = "images/r1.png"; break;67                 case "4": TypeImages = "images/z1.png"; break;68             }69             70             mark = new sogou.maps.Marker({71                 position: location,72                 title: Title,73                 map: map,74                 icon: TypeImages,75                 isFixed:true//不允许被清除76             });77 78             var contentString = <div class="Tan"><div class="wpic"><img  src="http://www.mamicode.com/images/ + Images+79             " /></div> +80             <p> + Con + </p> +81             </div>; 82             //创建窗体83             var infowindow = new sogou.maps.InfoWindow({84                 content: contentString85             });86             var container = document.createElement(div); //创建div87             container.innerHTML = contentString;88 89             var tpn = new sogou.maps.ToolPanel();90             tpn.setPanel(container);91             sogou.maps.event.addDomListener(mark, click, function () {92                 infowindow.open(map, mark);93                 tpn.setPoint(this.getPosition());//搜索功能94                 tpn.setCallback(function (a) { infowindow.setContent(a, 1) })95             }); 96         } 
View Code

ajax后台代码为

 1   [WebMethod] 2         public static string GetMarks() 3         { 4             string str = ""; 5             DataTable dt = GetData(); 6             foreach (DataRow rows in dt.Rows) 7             { 8                 str += rows["PointX"].ToString() + "&" + rows["PointY"].ToString() + "&" + rows["Company"].ToString() + "&" + rows["Explain"].ToString(); 9                 str += "&" + rows["MarkType"].ToString() + "&" + rows["ComImage"].ToString() + "|";10             } 11             return str;12         }13 14         private static DataTable GetData()15         {16             DataTable dt = new DataTable();17             string sql = "select * from MapMark";18             SqlConnection cnn = new SqlConnection(SqlCon);19             using (SqlCommand cmm = new SqlCommand(sql, cnn))20             {21                 using (SqlDataAdapter dapter = new SqlDataAdapter(cmm))22                 {23                     dapter.Fill(dt);24                 }25             }26             return dt;27         }
View Code

代码效果为: