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 = 0; j < array.length; j++) {
                if (array[j].toString() != "") {
                    var Yarr = array[j].split('&');
                    var TypeImages;
                    switch (Yarr[4].toString()) {
                        case "1": TypeImages = "images/b1.png"; break;
                        case "2": TypeImages = "images/o1.png"; break;
                        case "3": TypeImages = "images/r1.png"; break;
                        case "4": TypeImages = "images/z1.png"; break;
                    }
                    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>';
                   }
            } 
            document.getElementById('tmd_data').innerHTML = HtmlCon;   

            for (var i = 0; i < array.length; i++) {
                if (array[i].toString() != "") {
                    var Yarr = array[i].split('&');
                    AddMark(Yarr[0], Yarr[1], Yarr[3], Yarr[2], Yarr[4], Yarr[5], 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 "1": TypeImages = "images/b1.png"; break;
                case "2": TypeImages = "images/o1.png"; break;
                case "3": TypeImages = "images/r1.png"; break;
                case "4": 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="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, 1) })
            }); 
        } 

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;
        }

代码效果为：