在地图上添加自己想要的功能模块
具体代码如下
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 }
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 }
代码效果为：
C# sogou地图API应用总结（二）
时间： 2024-08-05 11:31:04