You are here
街景地图自己的例子
1)街景地图 有标注
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>吴中服装学校 - 街景地图</title>
</head>
<body onload="init()" >
<script charset="utf-8" src="http://map.soso.com/api/v2/main.js?key=afee5a412b456c3535c7133769dadf20"></script>
<script>
var pano;
var panolabel;
var init = function(){
pano_container=document.getElementById('PanoCtn'); //街景容器
pano = new soso.maps.Panorama(pano_container, {
pano: '10121014120527134327500', //场景ID
pov:{ //视角
heading:107, //偏航角
pitch:11 //俯仰角
},
zoom:1 //缩放
})
panolabel=new soso.maps.PanoramaLabel({
panorama:pano, //标注在上边刚创建的街景中
altitude:8.0, //标注高度15米，场景中的真实高度（我随便设的）
//position: new LatLng(31.283685958818845, 120.54202809546528), //标注点，标在与搜索结果相同的坐标上
content:'吴中服装学校就在附近' //标注内容
});
panolabel.setPosition(new soso.maps.LatLng(31.1838402420707783, 120.53262891028466));
}
</script>
<div id="PanoCtn" style="width:800px;height:500px"></div>
</body>
</html>
2)这是即有街景图 又有地图
<!DOCTYPE html>
<html>
<head>
<title></title>
<script charset="utf-8" src="http://map.soso.com/api/v2/main.js?key=afee5a412b456c3535c7133769dadf20"></script>
<!--引入插件-->
<script
src="http://api.map.soso.com/plugin/v2/PanoramaOverview/PanoramaOverview-min.js"></script>
<style type="text/css">
#panoCon {width: 600px;height: 300px;float: left;}
#overViewCon {float: left;border: 1px solid #000000;width: 600px;height: 300px; }
#panoOptions {border: 1px solid #f0f0f0;padding:15px;position: absolute;top: 10px;left: 630px;}
#Event {position: absolute;width: 620px;height: 200px;padding: 15px;border: 1px solid #f0f0f0;top: 200px;left: 630px;overflow: scroll;}
#Event input {left: 1190px;position: fixed;top: 210px;}
#EventCon div {white-space: nowrap;}
</style>
</head>
<body>
<div id="panoCon"></div>
<div id="overViewCon"></div>
</body>
<script>
var panorama = new soso.maps.Panorama('panoCon', {
pano:'10121014120527134327500',
pov:{ //视角
heading:107, //偏航角
pitch:11 //俯仰角
},
zoom:1
});
//创建插件实例
var overview = new soso.maps.PanoOverview(document.getElementById('overViewCon'),{
panorama:panorama
});
</script>
</html>
3)街景图搜索
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SOSO街景 - Panoramalabel综合示例</title>
<!--引入SOSO街景地图API，使用时记得替换YourKey！ -->
<script charset="utf-8" src="http://map.soso.com/api/v2/main.js?key=afee5a412b456c3535c7133769dadf20"></script>
<script>
function init() {
var poi;
//Step-2 街景吸附：得到POI半径200米内最近的街景场景
var getPanoInfo=function(){
//创建街景服务对象，用于吸附得到传入POI的街景
//详细手册参见：http://api.map.soso.com/doc_v2/ApiGuide.html#PanoramaService
var ps = new soso.maps.PanoramaService(); //创建实例
//吸附：poi坐标为中心，半径150米内最近街景，完成后回调：setPanoramalabel
ps.getPano(poi.latLng,150,setPanoramalabel);
}
//Step-3 创建街景，视角转向POI，并在街景中标注POI名称
var setPanoramalabel=function(Result){
//判断吸附结果是否有街景
if(Result!=null){
//Step-3.1 创建街景
var pano = new soso.maps.Panorama(document.getElementById('pano_container'), {
pano: Result.svid // svid就是panoId，SOSOAPI取名不一致
});
//Step-3.2 在街景中标注
/*for(var i in poi) {
if (poi.hasOwnProperty(i)) {
alert(i+ ': ' + poi[i]);
}
}*/
// position:poi.latLng,
mylatlgn = new LatLng(31.183163, 120.532425);
mypoint =new Point(31.183163, 120.532425);
var panolabel=new soso.maps.PanoramaLabel({
panorama:pano, //标注在上边刚创建的街景中
altitude:15.0, //标注高度15米，场景中的真实高度（我随便设的）
position:mypoint, //标注点，标在与搜索结果相同的坐标上
content:'吴中服装学校由快乐购超市向东50米即到' //标注内容
});
//Step-3.3 事件示例：单击Label后弹出“我是：poi.name”
soso.maps.event.addListener(panolabel,'click',function(e){
alert("我是：" + e.target.content)
});
////Step-3.4 调整街景视角，面向标注的Label，
//以下算法有兴趣的朋友可以研究一下，算出来的就是 街景场景坐标 面向 POI坐标 的偏航角(heading)
var x1 = Result.latlng.lng , y1 = Result.latlng.lat; //街景场景所在位置坐标
var x2 = poi.latLng.lng , y2 = poi.latLng.lat; //“家乐福”的搜索结果第一项的位置坐标
var alpha = Math.acos((y2 - y1) / Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
if (x2 - x1 < 0){
alpha = Math.PI * 2 - alpha;
}
var heading=alpha/Math.PI*180;
//设置视角面向POI
pano.setPov({heading : heading, pitch : 0});
}
}
//Step-1 程序入口：
//在SOSO地图中，在“北京” 搜索 “家乐福”
//使用SearchService(检索服务)，首先配置检索选项
var SearchOptions={
//搜索范围
location : "苏州市",
//搜索完成后回调， results为搜索结果
//本节主讲街景，关于SearchService的具体细节可参看http://api.map.soso.com
complete : function(results){
//获取检索结果的POI数组
var pois = results.detail.pois;
if(pois.length>0){//判断是否有搜索结果
//本示例取搜索结果第一项进行标注，仅为说明使用方法
poi=pois[0];
//alert(poi.latLng);
getPanoInfo(); //见Step-2：吸附获取搜索结果的街景
}
},
error:function(){alert('wocao')}
};
//创建检索服务实例，并将搜索设置传入其构造方法
var ss = new soso.maps.SearchService(SearchOptions);
ss.search("木东路快乐购"); //执行搜索
}
</script>
</head>
<body onLoad="init();">
<!--街景显示在以下 div 中 -->
<div style="width:603px;height:300px" id="pano_container"></div>
</body>
</html>
4)街景图搜索
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SOSO街景 - Panoramalabel综合示例</title>
<!--引入SOSO街景地图API，使用时记得替换YourKey！ -->
<script charset="utf-8" src="http://map.soso.com/api/v2/main.js?key=afee5a412b456c3535c7133769dadf20"></script>
<script>
function init() {
var poi;
//Step-2 街景吸附：得到POI半径200米内最近的街景场景
var getPanoInfo=function(){
//创建街景服务对象，用于吸附得到传入POI的街景
//详细手册参见：http://api.map.soso.com/doc_v2/ApiGuide.html#PanoramaService
var ps = new soso.maps.PanoramaService(); //创建实例
//吸附：poi坐标为中心，半径150米内最近街景，完成后回调：setPanoramalabel
ps.getPano(poi.latLng,150,setPanoramalabel);
}
//Step-3 创建街景，视角转向POI，并在街景中标注POI名称
var setPanoramalabel=function(Result){
//判断吸附结果是否有街景
if(Result!=null){
//Step-3.1 创建街景
var pano = new soso.maps.Panorama(document.getElementById('pano_container'), {
pano: Result.svid // svid就是panoId，SOSOAPI取名不一致
});
//Step-3.2 在街景中标注
//mylatlgn = new LatLng(31.183163, 120.532425);
//mypoint =new Point(31.183163, 120.532425);
var panolabel=new soso.maps.PanoramaLabel({
panorama:pano, //标注在上边刚创建的街景中
altitude:15.0, //标注高度15米，场景中的真实高度（我随便设的）
position:poi.latLng, //标注点，标在与搜索结果相同的坐标上
content:'吴中服装学校由快乐购超市向东50米即到' //标注内容
});
//alert(poi.latLng);
//panolabel.setPosition(new LatLng(31.183163, 120.532425));
//Step-3.3 事件示例：单击Label后弹出“我是：poi.name”
soso.maps.event.addListener(panolabel,'click',function(e){
alert("我是：" + e.target.content)
});
////Step-3.4 调整街景视角，面向标注的Label，
//以下算法有兴趣的朋友可以研究一下，算出来的就是 街景场景坐标 面向 POI坐标 的偏航角(heading)
var x1 = Result.latlng.lng , y1 = Result.latlng.lat; //街景场景所在位置坐标
var x2 = poi.latLng.lng , y2 = poi.latLng.lat; //“家乐福”的搜索结果第一项的位置坐标
var alpha = Math.acos((y2 - y1) / Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
if (x2 - x1 < 0){
alpha = Math.PI * 2 - alpha;
}
var heading=alpha/Math.PI*180;
//设置视角面向POI
pano.setPov({heading : heading, pitch : 0});
}
}
//Step-1 程序入口：
//在SOSO地图中，在“北京” 搜索 “家乐福”
//使用SearchService(检索服务)，首先配置检索选项
var SearchOptions={
//搜索范围
location : "苏州市",
//搜索完成后回调， results为搜索结果
//本节主讲街景，关于SearchService的具体细节可参看http://api.map.soso.com
complete : function(results){
//获取检索结果的POI数组
var pois = results.detail.pois;
if(pois.length>0){//判断是否有搜索结果
//本示例取搜索结果第一项进行标注，仅为说明使用方法
poi=pois[0];
getPanoInfo(); //见Step-2：吸附获取搜索结果的街景
}
},
error:function(){alert('wocao')}
};
//创建检索服务实例，并将搜索设置传入其构造方法
var ss = new soso.maps.SearchService(SearchOptions);
ss.search("木东路快乐购"); //执行搜索
}
</script>
</head>
<body onLoad="init();">
<!--街景显示在以下 div 中 -->
<div style="width:603px;height:300px" id="pano_container"></div>
</body>
</html>
</html>
5)街景图搜索
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SOSO街景 - Panoramalabel综合示例</title>
<!--引入SOSO街景地图API，使用时记得替换YourKey！ -->
<script charset="utf-8" src="http://map.soso.com/api/v2/main.js?key=afee5a412b456c3535c7133769dadf20"></script>
<script>
function init() {
var poi;
//Step-2 街景吸附：得到POI半径200米内最近的街景场景
var getPanoInfo=function(){
//创建街景服务对象，用于吸附得到传入POI的街景
//详细手册参见：http://api.map.soso.com/doc_v2/ApiGuide.html#PanoramaService
var ps = new soso.maps.PanoramaService(); //创建实例
//吸附：poi坐标为中心，半径150米内最近街景，完成后回调：setPanoramalabel
ps.getPano(poi.latLng,150,setPanoramalabel);
}
//Step-3 创建街景，视角转向POI，并在街景中标注POI名称
var setPanoramalabel=function(Result){
//判断吸附结果是否有街景
if(Result!=null){
//Step-3.1 创建街景
var pano = new soso.maps.Panorama(document.getElementById('pano_container'), {
pano: Result.svid // svid就是panoId，SOSOAPI取名不一致
});
//alert(poi.latLng);
//Step-3.2 在街景中标注
//mylatlgn = new LatLng(31.183163, 120.532425);
//mypoint =new Point(31.183163, 120.532425);
var panolabel=new soso.maps.PanoramaLabel({
panorama:pano, //标注在上边刚创建的街景中
altitude:13.0, //标注高度15米，场景中的真实高度（我随便设的）
position:poi.latLng, //标注点，标在与搜索结果相同的坐标上
content:'吴中服装学校由农家小厨和快乐购超市中间的路向东260米即到' //标注内容
});
//alert(poi.latLng);
//panolabel.setPosition(new LatLng(31.183163, 120.532425));
//Step-3.3 事件示例：单击Label后弹出“我是：poi.name”
soso.maps.event.addListener(panolabel,'click',function(e){
alert("我是：" + e.target.content)
});
////Step-3.4 调整街景视角，面向标注的Label，
//以下算法有兴趣的朋友可以研究一下，算出来的就是 街景场景坐标 面向 POI坐标 的偏航角(heading)
var x1 = Result.latlng.lng , y1 = Result.latlng.lat; //街景场景所在位置坐标
var x2 = poi.latLng.lng , y2 = poi.latLng.lat; //“家乐福”的搜索结果第一项的位置坐标
var alpha = Math.acos((y2 - y1) / Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
if (x2 - x1 < 0){
alpha = Math.PI * 2 - alpha;
}
var heading=alpha/Math.PI*180;
//设置视角面向POI
pano.setPov({heading : heading, pitch : 0});
}
}
//Step-1 程序入口：
//在SOSO地图中，在“北京” 搜索 “家乐福”
//使用SearchService(检索服务)，首先配置检索选项
var SearchOptions={
//搜索范围
location : "苏州市",
//搜索完成后回调， results为搜索结果
//本节主讲街景，关于SearchService的具体细节可参看http://api.map.soso.com
complete : function(results){
//获取检索结果的POI数组
var pois = results.detail.pois;
if(pois.length>0){//判断是否有搜索结果
//本示例取搜索结果第一项进行标注，仅为说明使用方法
poi=pois[0];
getPanoInfo(); //见Step-2：吸附获取搜索结果的街景
}
},
error:function(){alert('wocao')}
};
//创建检索服务实例，并将搜索设置传入其构造方法
var ss = new soso.maps.SearchService(SearchOptions);
ss.search("农家小厨"); //执行搜索
}
</script>
</head>
<body onLoad="init();">
<!--街景显示在以下 div 中 -->
<div style="width:800px;height:500px" id="pano_container"></div>
</body>
</html>
</html>
6)吴中服装学校附近的南家小厨街景
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>吴中服装学校 - 街景地图</title>
</head>
<body onload="init()" >
<script charset="utf-8" src="http://map.soso.com/api/v2/main.js?key=afee5a412b456c3535c7133769dadf20"></script>
<script>
var pano;
var panolabel;
var init = function(){
pano_container=document.getElementById('PanoCtn'); //街景容器
pano = new soso.maps.Panorama(pano_container, {
pano: '10121014120527134326600', //场景ID
pov:{ //视角
heading:107, //偏航角
pitch:11 //俯仰角
},
zoom:1 //缩放
})
panolabel=new soso.maps.PanoramaLabel({
panorama:pano, //标注在上边刚创建的街景中
altitude:15.0, //标注高度15米，场景中的真实高度（我随便设的）
//position: new LatLng(31.283685958818845, 120.54202809546528), //标注点，标在与搜索结果相同的坐标上
content:'吴中服装学校就在附近' //标注内容
});
panolabel.setPosition(new LatLng(33.283685958818845, 120.54202809546528));
}
</script>
<div id="PanoCtn" style="width:800px;height:500px"></div>
</body>
</html>
7)街景地图 搜索南家小厨
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SOSO街景 - Panoramalabel综合示例</title>
<!--引入SOSO街景地图API，使用时记得替换YourKey！ -->
<script charset="utf-8" src="http://map.soso.com/api/v2/main.js?key=afee5a412b456c3535c7133769dadf20"></script>
<script>
function init() {
var poi;
//Step-2 街景吸附：得到POI半径200米内最近的街景场景
var getPanoInfo=function(){
//创建街景服务对象，用于吸附得到传入POI的街景
//详细手册参见：http://api.map.soso.com/doc_v2/ApiGuide.html#PanoramaService
var ps = new soso.maps.PanoramaService(); //创建实例
//吸附：poi坐标为中心，半径150米内最近街景，完成后回调：setPanoramalabel
ps.getPano(poi.latLng,150,setPanoramalabel);
}
//Step-3 创建街景，视角转向POI，并在街景中标注POI名称
var setPanoramalabel=function(Result){
//判断吸附结果是否有街景
if(Result!=null){
//Step-3.1 创建街景
var pano = new soso.maps.Panorama(document.getElementById('pano_container'), {
pano: Result.svid // svid就是panoId，SOSOAPI取名不一致
});
//alert(poi.latLng);
//Step-3.2 在街景中标注
//mylatlgn = new LatLng(31.183163, 120.532425);
//mypoint =new Point(31.183163, 120.532425);
var panolabel=new soso.maps.PanoramaLabel({
panorama:pano, //标注在上边刚创建的街景中
altitude:13.0, //标注高度15米，场景中的真实高度（我随便设的）
position:poi.latLng, //标注点，标在与搜索结果相同的坐标上
content:'吴中服装学校由农家小厨和快乐购超市中间的路向东260米即到' //标注内容
});
//alert(poi.latLng);
//panolabel.setPosition(new LatLng(31.183163, 120.532425));
//Step-3.3 事件示例：单击Label后弹出“我是：poi.name”
soso.maps.event.addListener(panolabel,'click',function(e){
alert("我是：" + e.target.content)
});
////Step-3.4 调整街景视角，面向标注的Label，
//以下算法有兴趣的朋友可以研究一下，算出来的就是 街景场景坐标 面向 POI坐标 的偏航角(heading)
var x1 = Result.latlng.lng , y1 = Result.latlng.lat; //街景场景所在位置坐标
var x2 = poi.latLng.lng , y2 = poi.latLng.lat; //“家乐福”的搜索结果第一项的位置坐标
var alpha = Math.acos((y2 - y1) / Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
if (x2 - x1 < 0){
alpha = Math.PI * 2 - alpha;
}
var heading=alpha/Math.PI*180;
//设置视角面向POI
pano.setPov({heading : heading, pitch : 0});
}
}
//Step-1 程序入口：
//在SOSO地图中，在“北京” 搜索 “家乐福”
//使用SearchService(检索服务)，首先配置检索选项
var SearchOptions={
//搜索范围
location : "苏州市",
//搜索完成后回调， results为搜索结果
//本节主讲街景，关于SearchService的具体细节可参看http://api.map.soso.com
complete : function(results){
//获取检索结果的POI数组
var pois = results.detail.pois;
if(pois.length>0){//判断是否有搜索结果
//本示例取搜索结果第一项进行标注，仅为说明使用方法
poi=pois[0];
getPanoInfo(); //见Step-2：吸附获取搜索结果的街景
}
},
error:function(){alert('wocao')}
};
//创建检索服务实例，并将搜索设置传入其构造方法
var ss = new soso.maps.SearchService(SearchOptions);
ss.search("农家小厨"); //执行搜索
}
</script>
</head>
<body onLoad="init();">
<!--街景显示在以下 div 中 -->
<div style="width:800px;height:500px" id="pano_container"></div>
</body>
</html>
</html>
8)很普通地图
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOSOMap - 街景图层 PanoramaLayer </title>
<!--引入SOSO街景地图API，使用时记得替换YourKey！ -->
<script charset="utf-8" src="http://map.soso.com/api/v2/main.js?key=afee5a412b456c3535c7133769dadf20"></script>
<script>
var init = function(){
//创建地图，设置地图中心坐标，预设缩放为13级（zoomLevel取值范围4-18级）
var map = new soso.maps.Map(document.getElementById("container"),{
center: new soso.maps.LatLng(39.916527,116.397128),
zoomLevel: 13
})
//创建街景图层（高亮路网）实例
var pano_layer = new soso.maps.PanoramaLayer();
pano_layer.setMap(map);//将街景图层添加到地图中
}
</script>
</head>
<body onLoad="init()">
<!-- 地图显示在以下 div 中 -->
<div style="width:603px;height:300px" id="container"></div>
</body>
</html>
9)经纬度 鼠标移动显示经纬度
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOSOMap</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
</style>
<script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>
<script>
var init = function() {
var map = new soso.maps.Map(document.getElementById("container"),{
center: new soso.maps.LatLng(31.183785958818845, 120.53202809546528),
zoomLevel: 13
});
/*
soso.maps.Event.addListener(map,'mousemove',function(event) {
var latLng = event.latLng,
lat = latLng.getLat().toFixed(5),
lng = latLng.getLng().toFixed(5);
document.getElementById("latLng").innerHTML = lat+','+lng;
});*/
soso.maps.Event.addListener(map,'mousemove',function(event) {
var latLng = event.latLng,
lat = latLng.getLat(),
lng = latLng.getLng();
document.getElementById("latLng").innerHTML = lat+','+lng;
});
}
</script>
</head>
<body onload="init()">
<div style="width:603px;height:300px" id="container"></div>
<div style="width:603px;" id="latLng"></div>
</body>
</html>
10) 搜索后结果 点击显示经纬度
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>按关键字查询</title>
<script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>
<script>
var searchService,map,markers = [];
var init = function() {
var center = new soso.maps.LatLng(39.916527,116.397128);
map = new soso.maps.Map(document.getElementById('iCenter'),{
center: center,
zoomLevel: 13
});
searchService = new soso.maps.SearchService();
}
//清除地图上的marker
function clearOverlays(overlays){
var overlay;
while(overlay = overlays.pop()){
overlay.setMap(null);
}
}
function searchKeyword() {
var keyword = "宽窄巷子";
var region = "成都";
clearOverlays(markers);
var searchRequest = {
'keyword': keyword,
'region':region
};
var latlngBounds = new soso.maps.LatLngBounds();
searchService.search(searchRequest, function(results, status) {
if (status == soso.maps.SearchStatus.OK) {
var pois = results.pois;
for(var i = 0,l = pois.length;i < l; i++){
var poi = pois[i];
latlngBounds.extend(poi.latLng);
var marker = new soso.maps.Marker({
map:map,
position: poi.latLng,
title: poi.address+poi.latLng
});
var decor = new soso.maps.MarkerDecoration({
content: i+1,
margin: new soso.maps.Size(0, -4),
align: soso.maps.ALIGN.CENTER,
marker: marker
});
markers.push(marker);
}
map.fitBounds(latlngBounds);
} else {
$("#iCenter").append("检索没有结果，原因: " + status);
}
});
}
var showmap = function()
{
init();
searchKeyword();
}
</script>
</head>
<body onload="showmap();">
<div id="iCenter" style="height:300px;width=661px "></div>
</body>
</html>