在街景前景上显示谷歌标记

时间:2014-07-08 11:10:21

标签: javascript google-maps google-maps-markers google-street-view

加载街道地图后,有没有办法在前方地面显示标记图标,用户不应平移,直到他看到标记图标,我已更新以下链接中的代码

  var fenway = new google.maps.LatLng(40.729884, -73.990988);
  var mapOptions = {
    center: fenway,
    zoom: 14
  };
  var map = new google.maps.Map(
      document.getElementById('map-canvas'), mapOptions);
  var panoramaOptions = {
    position: fenway,
    pov: {
      heading: 500,
      pitch: 0
    }
  };

var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
var panorama1 = new  google.maps.StreetViewPanorama(document.getElementById('pano1'),panoramaOptions);


var marker = new google.maps.Marker({
    position:fenway,                                
    map:panorama    
});


var marker1 = new google.maps.Marker({
    position:fenway,                                
    map:panorama1,
});

map.setStreetView(panorama,fenway);
map.setStreetView(panorama1);

 http://jsfiddle.net/vinothpsv/JKx3Z/

2 个答案:

答案 0 :(得分:0)

听起来你只想改变标题......不确定你想要什么。标记基于标题的位置。

答案 1 :(得分:0)

The trick is in "google.maps.geometry.spherical.computeHeading"

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Street View service</title>
    <style>
      html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
    <script>
      var panorama = null;
      var fin;

      function initialize() {
        //var fenway = new google.maps.LatLng(42.345573,-71.098326);
        var fenway = new google.maps.LatLng(40.729884, -73.990988);
        var mapOptions = {
          center: fenway,
          zoom: 14
        };
        var map = new google.maps.Map(
          document.getElementById('map-canvas'), mapOptions);






     var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'));
            panorama.setPosition(fenway);
            google.maps.event.addListenerOnce(panorama, 'status_changed', function () {
                var heading = google.maps.geometry.spherical.computeHeading(panorama.getLocation().latLng, fenway);
                panorama.setPov({
                    heading: heading,
                    pitch: 0
                });
                setTimeout(function() {
                marker = new google.maps.Marker({
                    position: fenway,
                    map: panorama,

                });
                if (marker && marker.setMap) marker.setMap(panorama);}, 500);
            });


      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>

  <body>
    <div id="map-canvas" style="width: 400px; height: 300px"></div>
    <div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
    <div id="pano1" style="position:relative; left:410px; top: 8px; width: 400px; height: 300px;"></div>
  </body>

</html>