GMap:仅限初始化街景(无路线图)

时间:2012-04-24 10:09:06

标签: jquery google-maps jquery-plugins google-maps-api-3 jquery-gmap3

我正在使用“Gmap3”Jquery插件,我正在尝试初始化街景,没有街景和路线图的组合,也没有在街景和地图之间切换的可能性。 Gmap3在其文档中只有以下2个示例(http://gmap3.net/api/set-street-view.html):

显示路线图和街景视图:

var fenway = [42.345573,-71.098326];
$('#test1').gmap3(
{ action:'init',
   zoom: 14,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   streetViewControl: true,
   center: fenway
}, 
{ action:'setStreetView',
   id: 'test1-streetview',
options:{
   position: fenway,
   pov: {
     heading: 34,
     pitch: 10,
     zoom: 1
     }
   }
});

或在路线图和街景之间切换:

$('#test2').gmap3({
   action:'init',
   zoom: 18,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   streetViewControl: false,
   center: [40.729884, -73.990988]
});

$('#test2-toggle').click(function(){
$('#test2').gmap3({
   action:'getStreetView',
   callback:function(panorama){
     var visible = panorama.getVisible();
     if (visible) {
       panorama.setVisible(false);
     } else {
       var map = $(this).gmap3('get');
       panorama.setPosition(map.getCenter());
       panorama.setPov({
       heading: 265,
       zoom:1,
       pitch:0}
   );
panorama.setVisible(true);
}
}
});
});

但是我很抱歉,我试过但找不到合适的解决方案,如何在div #streetview中初始化街景。

我非常感谢任何帮助,提前谢谢你!

2 个答案:

答案 0 :(得分:2)

答案 1 :(得分:2)

我经常使用这个网站,它可以帮助你解决问题。 http://gmap3.net/api/set-street-view.html街景全景图的代码经过测试并正常运行:

<强> CSS

.gmap3,.googlemap {
  margin: 20px auto;
  border: 1px dashed #C0C0C0;
  width: 1000px;
  height: 500px;
}

<强> HTML

<div id="test1" class="gmap3"></div><div class="googlemap"></div>