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协变返回类型
今天看到句话:“支持重写方法时返回协变类型”. 那么什么事协变类型?在网上找了找资料,大体上明白了. Java 5.0添加了对协变返回类型的支持,即子类覆盖(即重写)基类方法时,返回的类型可以是基类方 ...
- OC之protocol监听器的实现
画图 图解 代码 总结 一.画图 本人画了一个图(字体和画图水平请忽略) 二.图解 1.首先我们上边是一个按钮的类,按钮当中包括了一条线,这个线是什么呢? 其实难理解就难理解到这条线上了 1⃣️这条线 ...
- linux ----虚拟机无法与本地机通信
1.以前能正常通信,电脑重启或休眠唤醒后, 虚拟机centos无法与本地主机通信,但能ping通同一局域网的其他主机,也能与外网通信 故障原因: 未找到 解决办法: 1.重启电脑 2.重启xshell ...
- state/ui-router
state/ui-router 一个状态对应于一个页面位置 通过定义controller.template和view等属性,来定义指定位置的用户界面和界面行为 通过嵌套的方式来解决页面中的一些重复出现 ...
- ionic使用sass
sass 是一个css的预编译器,常见的预编译器有less,sass,stylus等,目前sass似乎更受青睐一些,bootstrap的最新版本以及ionic 都是用sass来构建页面效果的.这篇文章 ...
- 京东2017 C++一面
一面直接跪,日 1. 重写和重载的区别 答的一般 2. C++内存分配方式 不会 3. TCP ...
- hdu-5700 区间交(二分+树状数组)
题目链接: 区间交 Problem Description 小A有一个含有n个非负整数的数列与mm个区间.每个区间可以表示为li,ri. 它想选择其中k个区间, 使得这些区间的交的那些 ...
- freeCodeCamp:Diff Two Arrays
比较两个数组,然后返回一个新数组,该数组的元素为两个给定数组中所有独有的数组元素.换言之,返回两个数组的差异. function diff(arr1, arr2) { var newArr = []; ...
- Java开发从零开始填坑
开始学习Java,感觉较.NET知识更零碎一些,所以开个帖子把自己踩过的坑记录下来,都是边边角角网上不容易找到的东西. 1.java命令格式:>cd %parent-of-pakadgePath ...
- LINQ简介和LINQ to SQL语句之Where
LINQ是Language Integrated Query的简称,它是集成在.NET编程语言中的一种特性.已成为编程语言的一个组成部分,在编写程序时可以得到很好的编译时语法检查,丰富的元数据,智能感 ...