自定义街景按钮/控件答案

【问题标题】：Custom street view button/control自定义街景按钮/控件
【发布时间】：2014-08-18 19:10:41
【问题描述】：

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

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

谁能帮忙？

谢谢

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

当然要显示全景图时必须将visible设置为true

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

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

【讨论】：