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

随机推荐

关于Java中获取当前系统时间
一. 获取当前系统时间和日期并格式化输出: import java.util.Date; import java.text.SimpleDateFormat; public class NowStri ...
hdu 3938 并查集
思路:这题的出题人是不是语文不行啊,题目意思说不清楚. 知道是求存在路径的点对数后,用并查集每次记录集合中点的数目,很容易就解决了. #include<set> #include<c ...
SQL Sever 2012 如何建立数据库连接
SQL Sever 2012 如何建立数据库连接一.下载 http://www.microsoft.com/zh-cn/download/details.aspx?id=29062 下载后直接安装即 ...
转：http range 用法与说明
转: http://www.cnblogs.com/Googler/archive/2010/08/19/1803700.html HTTP RANGE Range,是在 HTTP/1.1(http: ...
backbone.Collection源码笔记
Backbone.Collection backbone的Collection(集合),用来存储多个model,并且可以多这些model进行数组一样的操作,比如添加,修改,删除,排序,插入,根据索引取 ...
LC.exe exited with code -1 报错
vs项目运行是报LC.exe exited with code -1错误.现在什么鬼都能在度娘里面找到了. 删掉重新编译OK啦!
Part 82 to 85 Talking about Generic queue, stack collection class
Part 82 Generic queue collection class Part 83 Generic stack collection class Part 84 Real tim ...
UI2_视图切换
// // ViewController.m // UI2_视图切换 // // Created by zhangxueming on 15/7/1. // Copyright (c) 2015年 z ...
继承关系在内存和DB中的映射
使用将若干相似的类映射为单表,对拥有许多特殊数据的类使用具体表继承. 对高层次使用类表继承,对低层次使用具体表继承. Single Table Inheritance 在DB中将类继承层次设计为一个 ...
ubuntu下安装git，sublime，nodejs
用的是VMware10.0版本的虚拟机,很早之前下载的今天就直接用了,安装挺简单记得需要一个序列号.在这里:http://mirrors.163.com/ubuntu-releases/15.04/u ...

C# sogou地图API应用总结

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

随机推荐

热门专题