sogou地图API用法实例教程
本文实例讲述了sogou地图API应用，是非常实用的技巧。分享给大家供大家参考。具体实现方法如下：
地图的初始化
1、添加引用地图的API文件：
<script src="http://xiazai.jb51.net/201409/other/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: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script src="http://xiazai.jb51.net/201409/other/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: 10,center: new sogou.maps.Point(12956000, 4824875) };//城市坐标，本坐标为北京坐标
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: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script src="http://xiazai.jb51.net/201409/other/api_v2.5.1.js" type="text/javascript"></script>
<script>
var map;//创建全局变量
window.onload = function () {
var myOptions = { zoom: 10, center: new sogou.maps.Point(12956000, 4824875) };//指定城市
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 1: map.setMapTypeId(sogou.maps.MapTypeId.ROADMAP); break; //普通地图
case 2: map.setMapTypeId(sogou.maps.MapTypeId.SATELLITE); break; //卫星地图
case 3: 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(13522000, 3641093), zoom: 12, 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(12955101, 4824738, 12958355, 4827449);
//将地图设置为可全部显示这个范围
//注：不是设置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(12956000, 4824875); //指定描点位置
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: 1,
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: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script src="http://xiazai.jb51.net/201409/other/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 = 0;
//为地图添加点击事件、点击后显示当前坐标并添加点击描点
Listener = sogou.maps.event.addListener(map, 'click', function (event) {
if (num == 0) {
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: 1,
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 = 0;
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>
希望本文所述对大家的sogou地图开发有所帮助
相关推荐
-
javascript使用百度地图api和html5特性获取浏览器位置
复制代码 代码如下: <!DOCTYPE html><html><body><p id="demo">点击这个按钮,获得您的位置:</p><button onclick="getLocation()">试一下</button><script src="http://api.map.baidu.com/api?v=1.4" type="text/ja
-
百度地图api应用标注地理位置信息(js版)
有时做了一些东西没有记录,而过一段时间再看的时候,有会忘记了.需要在重新在看一遍. 百度地图javascript api可以参考 http://developer.baidu.com/map/reference/ 示例:http://developer.baidu.com/map/jsdemo.htm 更多百度地图的介绍http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/ 里面介绍的非常详细. 弄了一个百度地图来标注地理位置信息
-
百度地图API应用之获取用户的具体位置
功能的大概:用户通过点击地图上面的位置,在地图上面进行描点,然后再把获取的到的地理位置保存到地图上面的地址栏目中. 主要是百度地图API的使用 复制代码 代码如下: var map = new BMap.Map("allmap"); //实例化一个地图对象var point = new BMap.Point(116.331398,39.897445); //设置地图中心的位置map.centerAndZoom(point,12); //设置地图元素的可视层 map.enableScro
-
使用asp.net调用谷歌地图api示例
asp.net调用谷歌地图api,需要注意js引入的先后顺序,复制一下代码即可测试 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>//在这里要注意js引入的先后顺序 <link href="Mapjs/jquery.ui.base.css" rel="external nofollow" rel="
-
SOSO地图API使用(一)在地图上画圆实现思路与代码
前言:最近在做SOSO地图相关开发,遇到相关画圆知识,特此简单记录下来.1.在页面中添加SOSO地图API引用,引用脚本: 复制代码 代码如下: <script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>: 2.新建一个地图DIV容器,如下: 复制代码 代码如下: <div style="width:603px;height:300p
-
利用谷歌地图API获取点与点的距离的js代码
复制代码 代码如下: var request; var distanceArray = []; function getdistance() { distanceArray = []; var directionsService = new google.maps.DirectionsService(); for (var a = 0; a < pointsArray.length; a++) { for (var b = 0; b < pointsArray.length; b++) { i
-
Google 静态地图API实现代码
复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Google 静态地图 API</title> <style type="text/css"> #divStaticMap span { color:Gray; font-size:12px; } #divStaticMap .sel { width:130px; } </style> <script
-
js 调用百度地图api并在地图上进行打点添加标注
最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图.并且地图上有两个点,点击两个点有相应的提示信息,显示数据库里最新的两条数据信息.右边是一些文字说明.本人刚开始学习,做的也不是很好 总体效果如下所示: 首先新建map.php文件,代码如下 复制代码 代码如下: <!DOCTYPE html> <?php /* 创建与数据库的连接 */ $conn=mysql_connect("","","") or die
-
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
下图为使用百度地图JSAPI生成的H7N9感染分布图示例,其中的数据来自新华网(4.8号),截图如下: 使用的功能列表如下: 1.自定义版权控件功能,即(1)对应的数据来源部分,代码如下: 复制代码 代码如下: var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); map.addControl(cr); //添加版权控件 var bs = map.getBounds(); cr.addCopyright({id:
-
sogou地图API用法实例教程
本文实例讲述了sogou地图API应用,是非常实用的技巧.分享给大家供大家参考.具体实现方法如下: 地图的初始化 1.添加引用地图的API文件: <script src="http://xiazai.jb51.net/201409/other/api_v2.5.1.js" type="text/javascript"></script> 2.网站初始化加载事件: window.onload = function () { var map =
-
php获得网站访问统计信息类Compete API用法实例
本文实例讲述了php获得网站访问统计信息类Compete API用法.分享给大家供大家参考.具体如下: 这里使用php获得网站访问统计信息类Compete API,Compete是一个专门用来统计网站信息的网站 <?php // Check for dependencies if (!function_exists('curl_init')) throw new Exception('Compete needs the CURL PHP extension.'); if (!function_e
-
C#基础之委托用法实例教程
本文以实例形式简单介绍了C#中委托的用法,是深入学习C#程序设计所必须掌握的重要技巧.现以教程形式分享给大家供大家参考之用.具体如下: 首先,委托是C#中最为常见的内容.与类.枚举.结构.接口一样,委托也是一种类型.类是对象的抽象,而委托则可以看成是函数的抽象.一个委托代表了具有相同参数列表和返回值的所有函数.比如: delegate int GetCalculatedValueDelegate(int x, int y); 在上面的定义中,我们定义了一个委托,这个委托代表着一类函数,这些函数的
-
Python学习之asyncore模块用法实例教程
本文以实例分析了Python中asyncore模块的原理及用法,分享给大家供大家参考.具体分析如下: asyncore库是python的一个标准库,它是一个异步socket的包装.我们操作网络的时候可以直接使用socket等底层的库,但是asyncore使得我们可以更加方便的操作网络,避免直接使用socket,select,poll等工具时需要面对的复杂. 这个库很简单,包含了一个函数和一个类 * loop()函数 * dispatcher基类 需要注意的是,loop函数是全局的,不是dispa
-
java单元测试JUnit框架原理与用法实例教程
本文实例讲述了java单元测试JUnit框架原理与用法.分享给大家供大家参考,具体如下: 1 简介 JUnit是一个Java语言的单元测试框架,它由 Kent Beck 和 Erich Gamma 建立,逐渐成为 xUnit 家族中最为成功的一个. JUnit有它自己的JUnit扩展生态圈,多数Java的开发环境都已经集成了JUnit作为单元测试的工具.在这里,一个单元可以是一个方法.类.包或者子系统.因此,单元测试是指对代码中的最小可测试单元进行检查和验证,以便确保它们正常工作.例如,我们可以
-
MFC之ComboBox控件用法实例教程
本文以实例形式较为详细的讲述了MFC中ComboBox控件的用法.分享给大家供大家参考之用.具体方法如下: 一.ComboBox简介: ComboBox控件是由一个文本输入控件和一个下拉菜单组成的.用户可以从一个预先定义的列表里选择一个选项,同时也可以直接在文本框里面输入文本. 从工具栏中拖一个Combo Box控件.右击添加变量,变量名为cbBox. 二.用法: 1.为控件添加选项,指定默认选项 cbBox.AddString(_T("one")); cbBox.AddString(
-
Python迭代用法实例教程
本文实例讲述了Python中迭代的用法,是一个非常实用的技巧.分享给大家供大家参考借鉴之用.具体分析如下: 如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们成为迭代(Iteration). 在Python中,迭代是通过for ... in来完成的,而很多语言比如C或者Java,迭代list是通过下标完成的,比如Java代码: for (i=0; i<list.length; i++) { n = list[i]; } 可以看出,Python的f
-
python的类变量和成员变量用法实例教程
本文实例形式讲解了python的类变量和成员变量用法,对于Python程序设计有一定的参考价值.分享给大家供大家参考.具体如下: 先看看下面这段代码: class TestClass(object): val1 = 100 def __init__(self): self.val2 = 200 def fcn(self,val = 400): val3 = 300 self.val4 = val self.val5 = 500 if __name__ == '__main__': inst =
-
Python中zip()函数用法实例教程
本文实例讲述了Python中zip()函数的定义及用法,相信对于Python初学者有一定的借鉴价值.详情如下: 一.定义: zip([iterable, ...]) zip()是Python的一个内建函数,它接受一系列可迭代的对象作为参数,将对象中对应的元素打包成一个个tuple(元组),然后返回由这些tuples组成的list(列表).若传入参数的长度不等,则返回list的长度和参数中长度最短的对象相同.利用*号操作符,可以将list unzip(解压). 二.用法示例: 读者看看下面的例子,
-
Python中函数的用法实例教程
本文以数值计算为例讲述了Python中函数的用法,分享给大家供大家参考借鉴之用.具体如下: 我们都知道圆的面积计算公式为: S = πr2 当我们知道半径r的值时,就可以根据公式计算出面积.假设我们需要计算3个不同大小的圆的面积: r1 = 12.34 r2 = 9.08 r3 = 73.1 s1 = 3.14 * r1 * r1 s2 = 3.14 * r2 * r2 s3 = 3.14 * r3 * r3 当代码出现有规律的重复的时候,你就需要当心了,每次写3.14 * x * x不仅很麻烦