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.ROADMAP
13             }
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="images/‘ + Images+
79             ‘" /></div>‘ +
80             ‘<p>‘ + Con + ‘</p>‘ +
81             ‘</div>‘; 
82             //创建窗体
83             var infowindow = new sogou.maps.InfoWindow({
84                 content: contentString
85             });
86             var container = document.createElement(‘div‘); //创建div
87             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         } 

 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         }