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/ ...

随机推荐

ASP.NET的票据工具类FormsAuthenticationTicket
票据是asp.net登录验证的一种方式,以前研究过,现在并不使用,今天发现了,记录一下. /*###################票据工具################### * 1.设置< ...
Android 拍照代码实例
------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 这是我做的一个简单的利用Android手机的摄像头进行拍照的实例. 在这里我实现了基本的拍照.照片的存储 ...
oracle数据库例外处理与视图
pl/sql例外处理例当输入编号没有时的例外处理 declare --定义 v_ename emp.ename%type; begin -- select ename into v_ename f ...
Android开发 SDK NDK下载
2014.7版本 ADT Bundle http://dl.google.com/android/adt/adt-bundle-windows-x86-20140702.ziphttp://dl.go ...
linux-``反引号
反引号`` 这个东西的用法,我百度了一下,和$()是一样的.在执行一条命令时,会先将其中的 ``,或者是$() 中的语句当作命令执行一遍,再将结果加入到原命令中重新执行,例如:echo `ls`会先执 ...
jQuery选择器之基本过滤选择器Demo
测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
HTML标签大全
HTML标签解释大全一.HTML标记标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD). 标签:a 说明:标明超链接的起始或目的位置. 标签:acronym 说明:标 ...
C++之算法题模板
main.cpp: #include <iostream>#include <vector>#include <cstring>#include <cstdi ...
AndroidStudio开发工具快捷键
在这里,自己整理了下在使用AndroidStudio开发工具所使用到的一些快捷键提示,也出于在开发过程中节省时间提升效率,然而可能多数开发者之前使用的都是Eclipse开发工具,可能开始都不习惯,但是 ...
CSS之拖拽1
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化. clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的 ...

C# sogou地图API应用总结

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

随机推荐

热门专题