C# sogou地图API应用总结

地图的初始化
1、添加引用地图的API文件： <script src="http://api.go2map.com/maps/js/api_v2.5.1.js" type="text/javascript"></script>
2、网站初始化加载事件： window.onload = function () { var map = new sogou.maps.Map(document.getElementById("map_canvas"), {}); }
创建一个id为map_canvas的div,自定义div样式，网站运行时地图自动加载；

具体代码如下

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

html {height: auto;}

body {height: auto;margin: ;padding: ;}

#map_canvas {width:1000px;height: 500px;position: absolute;}

@media print {#map_canvas {height: 950px;}}

</style>

    <script src="http://api.go2map.com/maps/js/api_v2.5.1.js" type="text/javascript"></script>

    <script>

        window.onload = function () {

            var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="map_canvas"></div>

    </form>

</body>

</html>

指定显示莫城市地图

关键代码：

 window.onload = function () {

 var myOptions = { zoom: ,center: new sogou.maps.Point(, ) };//城市坐标，本坐标为北京坐标

 var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);

 }

地图属性了解

列举一下常用的一些属性比如:地图的移动、地图类型转换、跳转到指定城市

具体代码如下

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

    <style type="text/css">

html {height: auto;}

body {height: auto;margin: ;padding: ;}

#map_canvas {width:1000px;height: 500px;position: absolute;}

@media print {#map_canvas {height: 950px;}}

</style>

    <script src="http://api.go2map.com/maps/js/api_v2.5.1.js" type="text/javascript"></script>

    <script>

        var map;//创建全局变量

        window.onload = function () {

            var myOptions = { zoom: , center: new sogou.maps.Point(, ) };//指定城市

            map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);//创建地图 

        }

         //setMapTypeId方法示例

        function setMapTypeId(num) {

            //设置地图类型，如：

            //sogou.maps.MapTypeId.ROADMAP 普通地图

            //sogou.maps.MapTypeId.SATELLITE 卫星地图

            //sogou.maps.MapTypeId.HYBRID 卫星和路网混合地图

            //map.setMapTypeId(sogou.maps.MapTypeId.HYBRID)

            switch (num) {

                case : map.setMapTypeId(sogou.maps.MapTypeId.ROADMAP); break; //普通地图

                case : map.setMapTypeId(sogou.maps.MapTypeId.SATELLITE); break; //卫星地图

                case : map.setMapTypeId(sogou.maps.MapTypeId.HYBRID); break; //卫星和路网混合地图

            }

        }

        //panBy方法示例地图手动移动

        function panBy(a, b) {

            map.panBy(a, b)

        }

        //setOptions方法示例显示指定地区

        function setOptions() {

            //同时设置地图中心、级别、类型

            map.setOptions({ center: new sogou.maps.Point(, ), zoom: , mapTypeId: sogou.maps.MapTypeId.ROADMAP })

        }

        //setCenter方法示例 显示指定的地区 a、b为地图坐标，C为地图级别

        function setCenter(a, b, c) {

            map.setCenter(new sogou.maps.Point(a, b), c)

        }

        //fitBounds方法示例 跳转到指定的范围内

        function fitBounds() {

            //设置一个故宫附近的范围

            var bounds = new sogou.maps.Bounds(, , , );

            //将地图设置为可全部显示这个范围

            //注：不是设置bounds为这个值，而是调整到合适的位置

            map.fitBounds(bounds)

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <input value="普通地图" onclick="setMapTypeId(1)"  type="button"/>

    <input value="卫星地图" onclick="setMapTypeId(2)" type="button"/>

    <input value="卫星和路网混合地图" onclick="setMapTypeId(3)" type="button"/>

    <input value="向左移动" onclick="panBy(200,0)" type="button"/>

    <input value="向右移动" onclick="panBy(-200,0)" type="button"/>

    <input value="向上移动" onclick="panBy(0,200)" type="button"/>

    <input value="向下移动" onclick="panBy(0,-200)" type="button"/>

    <input value="向左上移动" onclick="panBy(200,200)" type="button"/>

    <input value="上海" onclick="setOptions()" type="button"/>

    <input value="天津" onclick="setCenter(13046000,4714250,10)" type="button"/>

      <input value="故宫" onclick="fitBounds()" type="button"/>

    <div id="map_canvas" ></div>

    </form>

</body>

</html>

地图描点属性

地图上很重要的属性，给地图添加描点，是常用的方法属性，

搜狗API提供两种描点填写形式默认描点和动态添加描点

默认描点添加：

  var location = new sogou.maps.Point(, ); //指定描点位置

var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});//初始化地图

 var marker = new sogou.maps.Marker({

                position: location,//描点坐标

                title: "描点",//描点名称

                label: { visible: true, align: "BOTTOM" },//描点显示形式

                map: map,

            });//添加描点到地图

动态描点添加

  window.onload = function () {

        //初始化地图

            map = new sogou.maps.Map(document.getElementById("map_canvas"), {});

//为地图添加点击事件

 sogou.maps.event.addListener(map, 'click', function (event) {

                var marker1 = new sogou.maps.Marker({

                position: event.point,

                map: map

            });

            });

        }

根据两描点测距

//获取类的唯一示例

        function getInstance(a) {

            a.hasOwnProperty("_instance") || (a._instance = new a);

            return a._instance

        }

 //两点相连

        function Lines(myLatlng, myPoint) {

            var convertor = getInstance(sogou.maps.Convertor);

            var distance = convertor.distance(myLatlng, myPoint);

            //两点链接

            var line = new sogou.maps.Polyline({

                path: [myLatlng, myPoint],

                strokeColor: "#FF0000",

                strokeOpacity: 1.0,

                strokeWeight: ,

                title: parseInt(distance) + "米",

                map: map

            });

        }

根据上述属性做了一个小的模块，地图上动态测距代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

    <style type="text/css">

html {height: auto;}

body {height: auto;margin: ;padding: ;}

#map_canvas {width:1000px;height: 500px;position: absolute;}

@media print {#map_canvas {height: 950px;}}

</style>

    <script src="http://api.go2map.com/maps/js/api_v2.5.1.js" type="text/javascript"></script>

    <script>

        var map;var num;var Listener;

        //获取类的唯一示例

        function getInstance(a) {

            a.hasOwnProperty("_instance") || (a._instance = new a);

            return a._instance

        }

        window.onload = function () {

        //初始化地图

            map = new sogou.maps.Map(document.getElementById("map_canvas"), {});

        }

        function AddCj() {

            var mypointh; var myPoint;

            num = ;

            //为地图添加点击事件、点击后显示当前坐标并添加点击描点

            Listener = sogou.maps.event.addListener(map, 'click', function (event) {

                if (num == ) {

                    mypointh = myPoint = event.point; //获取点击位置的坐标

                }

                else {

                    myPoint = mypointh;

                    mypointh = event.point; //获取点击位置的坐标

                }

                Lines(mypointh, myPoint);

                num++;

            });

        }

        function DelCj() {

            sogou.maps.event.removeListener(Listener)

        }

        //两点相连

        function Lines(myLatlng, myPoint) {

            var convertor = getInstance(sogou.maps.Convertor);

            var distance = convertor.distance(myLatlng, myPoint);

            //两点链接

            var line = new sogou.maps.Polyline({

                path: [myLatlng, myPoint],

                strokeColor: "#FF0000",

                strokeOpacity: 1.0,

                strokeWeight: ,

                title: parseInt(distance) + "米",

                map: map

            });

            placeMarker(myLatlng, parseInt(distance));

        }

        //动态添加描点，根据指定的坐标创建描点

        function placeMarker(location,jl) {

            var clickedLocation = location;

            var marker1 = new sogou.maps.Marker({

                position: location,

                title: jl+"米",

                label:{visible:true,align:"BOTTOM"},

                map: map

            });

        }

        function Mapclear() {

            num = ;

            map.clearAll();

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <input type="button" value="测距" onclick="AddCj()" />

    <input type="button" value="取消测距" onclick="DelCj()" />

    <input type="button" value="清空" onclick="Mapclear()" />

    <div id="map_canvas" ></div>

    </form>

</body>

</html>

C# sogou地图API应用总结的更多相关文章

C# sogou地图API应用总结（二）
在地图上添加自己想要的功能模块具体代码如下 var map; window.onload = function () { var myOptions = { mapControl: false, / ...
[转] 一个程序猿眼中的国内主流地图api
在网站或者手机应用中,经常用到地图api.在现在这么激烈的竞争下,各地图服务提供的服务基本都趋于一致了.一个公司推出的新服务,其他公司肯定也会很快的跟进.这样,对于开发者来说,地图api的选择就主要参 ...
【高德地图API】如何解决坐标转换，坐标偏移？
http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...
【地图API】为何您的坐标不准？如何纠偏？
原文:[地图API]为何您的坐标不准?如何纠偏? 摘要:各种坐标体系之间如何转换?到底有哪些坐标体系?什么是火星坐标?为什么我的坐标,在地图上显示会有偏移?本文详细解答以上问题.最后给出坐标拾取工具. ...
百度地图API位置偏移的校准算法
转自极客人原文百度地图API位置偏移的校准算法在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过. ...
高德地图api实现地址和经纬度的转换(python)
利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...
百度地图API的使用
------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...
吐槽贴：百度地图 api 封装的实用功能 [源码下载]
ZMap 类功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...
百度地图API 批量添加带检索功能的信息窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

【Shell脚本学习12】Shell字符串
字符串是shell编程中最常用最有用的数据类型(除了数字和字符串,也没啥其它类型好用了),字符串可以用单引号,也可以用双引号,也可以不用引号.单双引号的区别跟PHP类似. 单引号 str='this ...
EL表达式与JSTL(C)标签
一.EL表达式: Expression Language提供了在 JSP 脚本编制元素范围外(例如:脚本标签)使用运行时表达式的功能.脚本编制元素是指页面中能够用于在JSP 文件中嵌入 Java 代码 ...
有一种风格，叫做 Low Poly 3D
原作:Simon阿文杂交编辑者:RhinoC 个人更推崇使用第二款神器 ImageTriangulator :http://www.conceptfarm.ca/2013/port ...
About TI CC3000 Wifi
http://forums.adafruit.com/viewtopic.php?f=22&t=44384http://learn.adafruit.com/adafruit-cc3000-w ...
html&css静态页面
状态不好,整晚未眠. 想着敲点代码,遇着复杂的又自己生气,所以就敲了博客园的,总是很纠结"哪样的文字算标题算段落或要用span""什么时候用div比较好"&qu ...
应用越来越广泛的css伪类
说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...
JavaScript之canvas
num.push(x,y); 动画草图(举个栗子,我们把数字“2”给画出来): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
shell中使用echo命令改变输出显示样式
文本终端的颜色可以使用“ANSI非常规字符序列”来生成.举例:echo -e "\033[44;37;5m ME \033[0m COOL" 以上命令设置背景成为蓝色,前景白色,闪 ...
Java关键字介绍之this与super
1．什么是super?什么是this? super关键字表示超(父)类的意思.this变量代表对象本身. 2．使用super&this调用成员变量和方法可以使用super访问父类被子类隐藏的 ...
C#中多线程的简单应用
下面是C#中使用多线程的一个简单用法介绍: //主线程: Thread thread = new Thread(new ThreadStart(ReadExportData));//创建分支线程thr ...

C# sogou地图API应用总结

C# sogou地图API应用总结的更多相关文章

随机推荐

热门专题