首页 > 代码库 > 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 }
代码效果为
动态为地图添加描点（可后台管理）
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 }
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 }
代码效果为：
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。