javascript - 自定义街景按钮/控件

Question

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

我正在尝试在单击按钮时使用 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

1. 当然你必须设置visible为true当你想显示全景

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

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