C# sogou地图API应用总结（二）

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

具体代码如下

  var map;
   window.onload = function () {
             var myOptions = {
                 mapControl: false, //关闭默认的控件
                 mapTypeId: sogou.maps.MapTypeId.ROADMAP
             }
             map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); //初始化地图

             var homeControlDiv = document.createElement('DIV'); //创建
             homeControlDiv.style.position = "absolute";
             homeControlDiv.style.left = "20px";
             homeControlDiv.style.top = "5px";

             var homeControl = new HomeControl(homeControlDiv, map); //获取控件
             map.getContainer().appendChild(homeControlDiv); //将控件添加到地图上

         }
 function HomeControl(controlDiv, map) {

             controlDiv.style.padding = '5px';

             //测距功能
             var goHomeText = document.createElement('DIV');
             goHomeText.style.fontFamily = 'Arial,sans-serif';
             goHomeText.style.backgroundColor = 'white';
             goHomeText.style.cursor = 'pointer';
             goHomeText.style.borderStyle = 'solid';
             goHomeText.style.borderWidth = '1px';
             goHomeText.style.borderColor = 'black';
             goHomeText.style.fontSize = '12px';
             goHomeText.style.textAlign = 'center';
             goHomeText.style.float = 'left';
             goHomeText.style.width = "60px";
             goHomeText.innerHTML = '<b>测距</b>';
             controlDiv.appendChild(goHomeText);

             //获取坐标
             var SetZbText = document.createElement('DIV');
             SetZbText.style.fontFamily = 'Arial,sans-serif';
             SetZbText.style.backgroundColor = 'white';
             SetZbText.style.cursor = 'pointer';
             SetZbText.style.borderStyle = 'solid';
             SetZbText.style.borderWidth = '1px';
             SetZbText.style.borderColor = 'black';
             SetZbText.style.fontSize = '12px';
             SetZbText.style.textAlign = 'center';
             SetZbText.style.float = 'left';
             SetZbText.style.width = "60px";
             SetZbText.innerHTML = '<b>获取坐标</b>';
             controlDiv.appendChild(SetZbText);

             //清空多余描点
             var setHomeText = document.createElement('DIV');
             setHomeText.style.fontFamily = 'Arial,sans-serif';
             setHomeText.style.backgroundColor = 'white';
             setHomeText.style.cursor = 'pointer';
             setHomeText.style.borderStyle = 'solid';
             setHomeText.style.borderWidth = '1px';
             setHomeText.style.borderColor = 'black';
             setHomeText.style.fontSize = '12px';
             setHomeText.style.textAlign = 'center';
             setHomeText.style.float = 'left';
             setHomeText.style.width = "60px";
             setHomeText.innerHTML = '<b>清空</b>';
             controlDiv.appendChild(setHomeText); 

         }

代码效果为

动态为地图添加描点（可后台管理）

         var map;
         var MapZBs,Listener;
         var num;
         //获取类的唯一示例
         function getInstance(a) {
             a.hasOwnProperty("_instance") || (a._instance = new a);
             return a._instance
         }
         window.onload = function () {
             var myOptions = {
                 mapControl: false, //关闭默认的控件
                 mapTypeId: sogou.maps.MapTypeId.ROADMAP
             }
             map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); //初始化地图

             Marks(); //动态添加描点
         }
         //动态添加描点
         function Marks() {
             //ajax动态调取后台数据
             var marks;
             $.ajax({
                 type: "post",
                 contentType: "application/json",
                 url: "Index.aspx/GetMarks",
                 success: function (data) {
                     FxData(data.d);
                 }
             })
         }
         //描点内容分析
         function FxData(Data) {
             var array = Data.split('|');
             var HtmlCon = "";
             for (var j = ; j < array.length; j++) {
                 if (array[j].toString() != "") {
                     var Yarr = array[j].split('&');
                     var TypeImages;
                     switch (Yarr[].toString()) {
                         case "": TypeImages = "images/b1.png"; break;
                         case "": TypeImages = "images/o1.png"; break;
                         case "": TypeImages = "images/r1.png"; break;
                         case "": TypeImages = "images/z1.png"; break;
                     }
                     HtmlCon += '<li id="mark' + (j + ) + '" class=""><h3 class="dining" style="background: url(' + TypeImages + ') no-repeat;background-size: 30px 30px;">' + Yarr[] + '</h3><div class="priceinfo2">' + Yarr[] + '</div></li>';
                    }
             }
             document.getElementById('tmd_data').innerHTML = HtmlCon;   

             for (var i = ; i < array.length; i++) {
                 if (array[i].toString() != "") {
                     var Yarr = array[i].split('&');
                     AddMark(Yarr[], Yarr[], Yarr[], Yarr[], Yarr[], Yarr[], i, i);
                 }
             }
         }
         //生成描点和弹出层
         function AddMark(location, location1,Con,Title,ImgType,Images,mark,num) {
             var location = new sogou.maps.Point(location, location1); //描点位置
             //var location = new sogou.maps.LatLng(location, location1);
             var TypeImages = "";
             switch (ImgType) {
                 case "": TypeImages = "images/b1.png"; break;
                 case "": TypeImages = "images/o1.png"; break;
                 case "": TypeImages = "images/r1.png"; break;
                 case "": TypeImages = "images/z1.png"; break;
             }

             mark = new sogou.maps.Marker({
                 position: location,
                 title: Title,
                 map: map,
                 icon: TypeImages,
                 isFixed:true//不允许被清除
             });

             var contentString = '<div class="Tan"><div class="wpic"><img  src="data:images/' + Images+
             '" /></div>' +
             '<p>' + Con + '</p>' +
             '</div>';
             //创建窗体
             var infowindow = new sogou.maps.InfoWindow({
                 content: contentString
             });
             var container = document.createElement('div'); //创建div
             container.innerHTML = contentString;

             var tpn = new sogou.maps.ToolPanel();
             tpn.setPanel(container);
             sogou.maps.event.addDomListener(mark, 'click', function () {
                 infowindow.open(map, mark);
                 tpn.setPoint(this.getPosition());//搜索功能
                 tpn.setCallback(function (a) { infowindow.setContent(a, ) })
             });
         } 

ajax后台代码为

   [WebMethod]
         public static string GetMarks()
         {
             string str = "";
             DataTable dt = GetData();
             foreach (DataRow rows in dt.Rows)
             {
                 str += rows["PointX"].ToString() + "&" + rows["PointY"].ToString() + "&" + rows["Company"].ToString() + "&" + rows["Explain"].ToString();
                 str += "&" + rows["MarkType"].ToString() + "&" + rows["ComImage"].ToString() + "|";
             }
             return str;
         }

         private static DataTable GetData()
         {
             DataTable dt = new DataTable();
             string sql = "select * from MapMark";
             SqlConnection cnn = new SqlConnection(SqlCon);
             using (SqlCommand cmm = new SqlCommand(sql, cnn))
             {
                 using (SqlDataAdapter dapter = new SqlDataAdapter(cmm))
                 {
                     dapter.Fill(dt);
                 }
             }
             return dt;
         }

代码效果为：