Question

我希望能够使用google maps api v3拥有自己的“街景”按钮。单击该按钮时，我希望根据标记的latlng加载街景视图。然后我希望按钮更改为“返回地图”，然后再次加载默认地图视图。

我试图在点击按钮时使用getStreetView（myLatlng），但是它没有加载街景，所以我必须在这里遗漏一些东西，但我似乎无法在网上找到任何帮助。这是我的代码： -

        var map;
    var myLatlng = new google.maps.LatLng(42.333029,-83.04559);

    /**
     * The HomeControl adds a control to the map that simply
     * returns the user to Chicago. This constructor takes
     * the control DIV as an argument.
     * @constructor
     */
    function customStreetView(controlDiv, map) {

      // Offset from the corner
      controlDiv.style.padding = '10px';

      // Create control div
      var controlUI = document.createElement('div');
      controlUI.innerHTML = "View on street";
      controlUI.className = "google_map_button"
      controlDiv.appendChild(controlUI);

      // Setup the click event listener
      google.maps.event.addDomListener(controlUI, 'click', function() {
        var panorama = map.getStreetView(myLatlng);
        if(panorama){panorama.setVisible(false);}
      });

    }

    function initialize() {

        var mapOptions = {
            zoom: 17,
            center: myLatlng,
            panControl: true,
            zoomControl: true,
            mapTypeControl: false,
            scaleControl: true,
            streetViewControl: false,
            overviewMapControl: true
        }

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // Set the marker
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            icon: 'images/google-map-marker.png'
        });

        // Create the DIV to hold the control and
        // call the HomeControl() constructor passing
        // in this DIV.
        var homeControlDiv = document.createElement('div');
        var homeControl = new customStreetView(homeControlDiv, map);

        homeControlDiv.index = 1;

        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);       

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

    </script>

有人可以帮忙吗？

谢谢

Answer 1

当然，当您想要展示全景时，您必须将visible设置为true

position不会通过getStreetView()的参数设置，您必须通过set，setValues，setPosition或setOptions

google.maps.event.addDomListener(controlUI, 'click', function() {
  map.getStreetView().setOptions({visible:true,position:myLatlng});
});

自定义街景按钮/控件

1 个答案: