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/ ...
随机推荐
- iOS之GCD的DEMO
由DEMO得知,串行队列同步执行会按照顺序一步一步执行,不会开辟线程 由DEMO得知,串行队列异步执行,队列中的任务会一步一步按顺序执行,队列外的任务不确定.会开辟线程 由DEMO得知,并行队列同步执 ...
- 使用keil建立标准STM32工程模版（图文详细版！）
1. 模板工程的创建(超级详细版,使用的是keil 4.5版本) 1.1创建工程目录 良好的工程结构能让文件的管理更科学,让开发更容易更方便,希望大家养成良好的习惯,使用具有合理结构的工程目录,当 ...
- axure rp pro 6.5 注册码
发现一可用的注册码: Name:BEAN Serial:MZlb4FJwOVw+j04A4pX8S5genhcCOo1adsaH/ZHOukDY7OyPJcCKUHlwUEfU0Osr (已验证可用) ...
- Amazon教程：刚买就降价！避免损失，申请PRICE MATCH（价格保护）的方法
Amazon的商品价格波动频繁,虽然老白通常都在价格较低的时机向大家推荐,但是经常有降了又降的情况,刚下的单还没到手就又降价了,这种滋味肯定不好受.Amazon客服明确告诉老白一周内降价都可以申请PR ...
- VMware系统运维（十九）部署虚拟化桌面 Horizon View 5.2 通过手持设备进行连接测试
1.打开连接程序View,设置连接服务器的IP地址,点击连接,在这里输入连接的用户名密码,点击"连接" 2.正在载入桌面中...... 3.连接成功,个人建议,手机支持OTG的可以 ...
- ServiceLoader的使用
ServiceLoader与ClassLoader是Java中2个即相互区别又相互联系的加载器.JVM利用ClassLoader将类载入内存,这是一个类声明周期的第一步(一个java类的完整的生命周期 ...
- hdu 4412 利用单调性的动态规划
思路: 这题和1227的求法一样,只不过1227是小数据,暴力下,就能进行预处理. 这题的预处理区间期望cost[i][j]需要利用单调性. 即假使以pos位置为安排的点,那么这个区间在其左边的概率为 ...
- XML文件注意问题
一.Elements和Descendant Elements 相当于root节点下的子节点,Desendant元素相当于root节点下的所有子节点(包括root.elments下个子节点也包括root ...
- 四.CSS声明
概述 一条CSS规则包括选择符和声明两个部分,声明又包括属性和值,属性指出要影响样式的那个方面,而值用于把属性设定成什么 每个HTML元素有很多属性,可以用CSS来设定,但值却只有少数的几种 CSS属 ...
- js 动态添加元素（div、li、img等）及设置属性
把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点 ...