javascript - 在模式中重复使用谷歌地图街景

Question

我正在使用 Rails 开发网络应用程序。当我打开一个标记时，会弹出一个模态框，其中包含一个街景 View 。我可以打开一个或两个标记，但之后我收到一个错误，指出 WebGL 遇到了障碍。我试图在网上寻找资源，但没有任何意义。有关更多信息，请参见下面的图片。任何帮助将不胜感激。

First image with error

这是我的控制台日志的图像:

这是我的 web 应用程序中的 JavaScript 代码。

<script type="text/javascript">
var handler = Gmaps.build('Google', {
    markers: {
        clusterer: {
            gridSize: 60,
            maxZoom: 20,
            styles: [
                {
                    textSize: 10,
                    textColor: '#ff0000',
                    url: 'assets/creative/m1.png',
                    height: 60,
                    width: 60,
                },
                {
                    textSize: 14,
                    textColor: '#ffff00',
                    url: 'assets/creative/m2.png',
                    height: 60,
                    width: 60,
                },
                {
                    textSize: 18,
                    textColor: '#0000ff',
                    url: 'assets/creative/m3.png',
                    width: 60,
                    height: 60,
                },
            ],
        },
    },
});

var handler2 = Gmaps.build('Google');
var current;
function initialize() {
    handler.buildMap({ internal: {id: 'map'} }, function () {
        markers_json = <%= raw @hash.to_json %>;
        markers = _.map(markers_json, function (marker_json) {
            marker = handler.addMarker(marker_json);
            handler.fitMapToBounds();
            _.extend(marker, marker_json);
            return marker;
        });

        getLocation();

        markers.map(function (elem, index) {
            google.maps.event.addListener(elem.getServiceObject(), 'click', function (evt) {
                var id = elem.id,
                    number = elem.number,
                    name = elem.name,
                    zipcode = elem.zipcode,
                    tabid = elem.tabid,
                    latitude = elem.latitude,
                    longitude = elem.longitude;

                $('.name').html('<h3 class=\'panel-title\'><i class=\'fa fa-id-card\'></i>' + number + '</h3>');
                $('.paneltb').html('<thead><tr><th>Panel</th><th>Location</th><th>Tab ID</th><th>Zip Code</th><th>Latitude</th><th>Longitude</th></tr></thead><tbody><tr><td>' + number + '</td><td>' + name + '</td><td>' + tabid + '</td><td>' + zipcode + '</td><td>' + latitude + '</td><td>' + longitude + '</td></tr></tbody>');

                pos = new google.maps.LatLng(latitude, longitude);

                var div = document.getElementById('map2');
                var sv = new google.maps.StreetViewPanorama(div);
                sv.setPosition(pos);
                sv.setVisible(true);

                // find the heading by looking from the google car pos to the venue pos
                var service = new google.maps.StreetViewService();
                service.getPanoramaByLocation(pos, 50, function (result, status) {
                    if (status == google.maps.StreetViewStatus.OK)
                    {
                        carPos = result.location.latLng;
                        heading = google.maps.geometry.spherical.computeHeading(carPos, pos);
                        sv.setPov({ heading: heading, pitch: 0, zoom: 1 });
                    }
                });

                $('#myModal').modal('show');
                current = elem;
            });
        });
    });
    // Create the search box and link it to the UI element.
}

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayOnMap);
    } else {
        navigator.geolocation.getCurrentPosition(displayOnMapError);
    }
}

function displayOnMap(position) {
    marker2 = handler.addMarker({
        lat: position.coords.latitude,
        lng: position.coords.longitude,
        picture: {
            url: "<%= asset_path 'creative/1499326997_Untitled-2-01.png' %>",
            width: 48,
            height: 48,
        },
        infowindow: 'You are Here!',
    });
    handler.map.centerOn(marker2);
    handler.getMap().setZoom(10);
}

function displayOnMapError(position) {
    marker2 = handler.addMarker({
        lat: 34.0522,
        lng: -118.2437,
        picture: {
            url: "<%= asset_path 'creative/1499326997_Untitled-2-01.png' %>",
            width: 48,
            height: 48,
        },
    });
    handler.map.centerOn(marker2);
    handler.getMap().setZoom(10);
}

initialize();
</script>

这是让模式弹出我需要的信息的原始代码。

$(".name").html("<h3 class='panel-title'><i class='fa fa-id-card'></i>"+number+"</h3>");
$(".paneltb").html("<thead><tr><th>Panel</th><th>Location</th><th>Tab ID</th><th>Zip Code</th><th>Latitude</th><th>Longitude</th></tr></thead><tbody><tr><td>"+number+"</td><td>"+ name + "</td><td>"+tabid+"</td><td>"+zipcode+"</td><td>"+latitude+"</td><td>"+longitude+"</td></tr></tbody>");

$('#myModal').modal('show');
current = elem;

为了在模式中添加街景 View ，添加了以下代码:

pos = new google.maps.LatLng( latitude, longitude );

var div = document.getElementById('map2');
var sv = new google.maps.StreetViewPanorama(div);
sv.setPosition(pos);
sv.setVisible(true);

// find the heading by looking from the google car pos to the venue pos
var service = new google.maps.StreetViewService();
service.getPanoramaByLocation(pos, 50, function (result, status) {
    if (status == google.maps.StreetViewStatus.OK) {   
        carPos = result.location.latLng;
        heading = google.maps.geometry.spherical.computeHeading(carPos, pos);
        sv.setPov({ heading: heading, pitch: 0, zoom: 1 });
    }
});

为了将当前的纬度和经度传递到街景 View 中，我必须将它放在调用模态的同一函数中。

更新

我不知道如何设置 var sv = new google.maps.StreetViewPanorama(div); 所以它被设置一次并且相同的 map 被调用而不是模态的每个实例重用尝试启动和重新启动一个新实例。

更新 2

我不知道如何初始化这部分:

var sv = new google.maps.StreetViewPanorama(div);

因此，当我打开模态时，它不会渲染新 map ，它只是重复使用同一张 map 。我倾向于编写另一个函数，但我需要一些指导。

更新 3

我注意到的另一件事是，当我单击一个标记时，它会在模态中显示填充其正方形的街景。当我点击另一个时，有时它根本不会显示，但在大多数情况下，它会显示但在 Angular 落里非常小，如下图所示:

我还注意到来自 Google map 的类 widget-scene-canvas 的代码不断改变自己，当我点击超过不同时间的第一张 map 。

Answer 1

我发现我遇到的问题不止一个，确切地说我有三个。感谢https://stackoverflow.com/a/19048363/7039895我能够弄清楚，每次打开模态时，我都需要在模态内调整 map 的大小。打开模式后放置的脚本是:

$("#myModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(sv, "resize");
});  

第二个问题发生时，我注意到当我打开模式时，某些位置会呈现谷歌街道 map ，而其他位置会呈现谷歌街道 map ，但它是纯黑色的，如下图所示:

我发现我需要将渲染的街道 map 的缩放比例更改为 0，因为它与汽车的 pov 的缩放比例为 1，并且我 map 中的一些纬度和经度无法缩放，而其他的可以，这一切都取决于谷歌汽车在哪里拍摄照片。这是代码通知，其中显示 zoom 我将其从 1 缩放更改为 0:

var service = new google.maps.StreetViewService();
        service.getPanoramaByLocation( pos, 50, function(result, status) {
            if (status == google.maps.StreetViewStatus.OK) 
            {   
                carPos = result.location.latLng;
                heading = google.maps.geometry.spherical.computeHeading( carPos, pos );
                sv.setPov( { heading: heading, pitch: 0, zoom: 0 } );
            }
        })

我需要修复的最后一件事是 webGL 遇到了一个不断弹出的障碍错误。在对我进行进一步调查后，我注意到我是在网络应用程序中还是只是在浏览谷歌地图，它无论如何都会弹出。总的来说好像是chrome的错误所以特地看了这篇文章https://www.xtremerain.com/fix-rats-webgl-hit-snag-chrome/我按照第一个示例并从高级设置中禁用(见下文)。

Use hardware acceleration when available

之后我回去测试 map ，每个位置打开时都显示谷歌街道 map ，webgl hit a snag 错误不再出现。

这是我的网络应用程序 map 部分的最终代码:

var handler = Gmaps.build('Google', {
               markers:
                      {clusterer: {
                        gridSize: 60,
                        maxZoom: 20,
                        styles: [ {
                          textSize: 10,
                          textColor: '#ff0000',
                          url: 'assets/creative/m1.png',
                          height: 60,
                          width: 60 }
                        , {
                          textSize: 14, 
                          textColor: '#ffff00',
                          url:'assets/creative/m2.png',
                          height: 60,
                          width: 60 }
                        , {
                         textSize: 18, 
                         textColor: '#0000ff',
                         url: 'assets/creative/m3.png',
                         width: 60,
                         height: 60}
                        ]}}
            });

var current;
function initialize(){
  handler.buildMap({ internal: {id: 'map'} }, function() {

    markers_json = <%=raw @hash.to_json %>;
    markers = _.map(markers_json, function(marker_json){
      marker = handler.addMarker(marker_json);
      handler.fitMapToBounds();
      _.extend(marker, marker_json);
      return marker;
    });

    getLocation();



    markers.map(function(elem, index) {

      google.maps.event.addListener(elem.getServiceObject(), "click", function(evt) {
        var id = elem.id,
            number = elem.number,
            name = elem.name,
            zipcode = elem.zipcode,
            tabid = elem.tabid,
            latitude = elem.latitude,
            longitude = elem.longitude



         $(".name").html("<h3 class='panel-title'><i class='fa fa-id-card'></i>"+number+"</h3>")
         $(".paneltb").html("<thead><tr><th>Panel</th><th>Location</th><th>Tab ID</th><th>Zip Code</th><th>Latitude</th><th>Longitude</th></tr></thead><tbody><tr><td>"+number+"</td><td>"+ name + "</td><td>"+tabid+"</td><td>"+zipcode+"</td><td>"+latitude+"</td><td>"+longitude+"</td></tr></tbody>")


        pos = new google.maps.LatLng( latitude, longitude );
        var div = document.getElementById('map2');
        var sv = new google.maps.StreetViewPanorama(div);



        sv.setPosition( pos );
        sv.setVisible( true );

        // find the heading by looking from the google car pos to the venue pos
        var service = new google.maps.StreetViewService();
        service.getPanoramaByLocation( pos, 50, function(result, status) {
            if (status == google.maps.StreetViewStatus.OK) 
            {   
                carPos = result.location.latLng;
                heading = google.maps.geometry.spherical.computeHeading( carPos, pos );
                sv.setPov( { heading: heading, pitch: 0, zoom: 0 } );
            }
        })

        $('#myModal').modal('show')

            current = elem;

      $("#myModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(sv, "resize");
});  

        });
    })
  });
    // Create the search box and link it to the UI element.


}
function getLocation(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(displayOnMap);
  }
  else{
    navigator.geolocation.getCurrentPosition(displayOnMapError);
  }
};
function displayOnMap(position){

  marker2 = handler.addMarker({
    lat: position.coords.latitude,
    lng: position.coords.longitude,
    picture: {
        url: "<%= asset_path 'creative/1499326997_Untitled-2-01.png' %>",
        width:  48,
        height: 48
        },
    infowindow:  "You are Here!"
  });
  handler.map.centerOn(marker2);
  handler.getMap().setZoom(10);
};

function displayOnMapError(position){

  marker2 = handler.addMarker({
    lat: 34.0522,
    lng: -118.2437,
    picture: {
        url: "<%= asset_path 'creative/1499326997_Untitled-2-01.png' %>",
        width:  48,
        height: 48
        }
  });
  handler.map.centerOn(marker2);
  handler.getMap().setZoom(10);
};




initialize();