重复使用模式内的Google Maps街景 [英] Reuse a Google Maps street view inside of a modal

问题描述

我正在Rails中开发一个Web应用程序。当我打开一个标记时，一个模式将弹出一个框中的街景。我可以打开一个或两个标记，但在此之后，我收到WebGL遇到的一个错误。我试图在网上寻找资源，但没有任何意义。请参阅下面的图片了解更多信息。任何帮助将不胜感激。

这里是我的控制台日志的形象：

这是我的webapp中的JavaScript代码。

 < script type =text / javascript> 
 var handler = Gmaps.build（'Google'，{
 markers：{
 clusterer：{
 gridSize：60，
 maxZoom：20，
样式：[
 {
 textSize：10，
 textColor：'＃ff0000'，
 url：'assets / creative / m1.png'，
身高：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; 
函数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）; 
返回标记; 
}）; 
 
 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（'< h 3 class = \'panel-title\'>< i class = \'fa fa-id-card''>< / i>'+ number +'< / h3>） ; 
 $（'。paneltb'）。html（'< thead>< th>第>第>第th>位置第< th>标签ID< / th>第t个第t个第t个经度t第t个t t t t t t t t t t t t t t t t t t t t t t t t t t t '+数字+'< / td>< td>'+ name +'< / td>< td>'+ tabid +'< / td>< td>'+ zipcode +'< / td>< td>'+ latitude +'< / tbody>< td>'+ longitude +'< / 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）; 
 
 //通过从google car pos到会场pos来查找标题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; 
}）; 
}）; 
}）; 
 //创建搜索框并将其链接到UI元素。 
 
 
函数getLocation（）{
 if（navigator.geolocation）{
 navigator.geolocation.getCurrentPosition（displayOnMap）; 
} else {
 navigator.geolocation.getCurrentPosition（displayOnMapError）; 
 
 
 
函数displayOnMap（position）{
 marker2 = handler.addMarker（{
 lat：position.coords.latitude，
 lng：position.coords.longitude，
图片：{
 url：<％= asset_path'creative / 1499326997_Untitled-2-01.png'％>，
 width： 48，
身高：48，
}，
 infowindow：'你在这里！'，
}）; 
 handler.map.centerOn（marker2）; 
 handler.getMap（）。setZoom（10）; 
} 
 
函数displayOnMapError（position）{
 marker2 = handler.addMarker（{
 lat：34.0522，
 lng：-118.2437，
图片：{
 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>< th>第>第< th>位置第th>标签ID< th>第t个第t个第t个经度t第t个t t t t t t t t t t t t t t t t t t t t t t t t t t t ;+ number +< / td>< td>+ name +< / td>< td>+ tabid +< / td>< td>+ zipcode +< / td> < TD> 中+纬度+ < / TD>< TD> 中+经度+ < / TD>< / TR>< / tbody的>中）; 
 
 $（'＃myModal'）。modal（'show'）; 
 current = elem; 
  

为了在模态中添加街景视图，添加了以下代码：

  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）; 
 
 //通过从google car pos到会场pos来查找标题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}）; 
} 
}）; 
  

为了将当前经纬度传递给街景，我必须将其放入

$ b 更新

我无法设置如何设置 var sv = new google.maps.StreetViewPanorama（div）; ，因此它被设置一次，并且为被调用的模型的每个实例重用相同的地图而不是尝试启动并重新启动一个新实例。

更新2

我无法弄清楚如何初始化这部分：

  var sv = new google.maps.StreetViewPanorama（div）; 
  

所以当我打开一个模式时，它不会渲染一个新的地图，它只是重用相同的地图。我倾向于写另一个功能，但我需要一些指导。

更新3

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

我也注意到class widget-scene-canvas 的代码来了从谷歌地图不断改变自己从我原来是通过我自己的身份证样式，当我点击超过第一个地图在不同的时间。

解决方案

我发现我有三个以上的问题。感谢

我发现我需要将渲染的街道地图的缩放比例更改为0，因为它距离汽车的坡度只有1倍的缩放比例，而我的地图中的一些拉特和长线不能缩放，而其他可以和这一切都取决于谷歌汽车在哪里拍照。这是代码注意，它说 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遇到了麻烦不断出现的错误。经过对我的进一步调查，我注意到我是在网络应用程序中，还是只是在探索谷歌地图，而不管它是什么。这似乎是一个铬一般错误，所以我特别看了这篇文章 https://www.xtremerain.com/fix-rats-webgl-hit-snag-chrome/ 我遵循第一个示例并从高级设置中禁用（请参阅下文）。

$ b

使用硬件加速功能时可以使用硬件加速功能

之后，我回去测试地图，每个位置打开，显示谷歌街道地图，并且webgl遇到了一个不再出现的障碍错误。

以下是我的web应用程序的地图部分的最终代码：

  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，$ b $ height：60} 
]}} 
} ）; 
 
 var current; 
函数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）; 
返回标记; 
}）; 
 
 getLocation（）; 
 
 
 
 marker.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>< th>第>第< th>位置第th>标签ID< th>第t个第t个第t个经度t第t个t t t t t t t t t t t t t t t t t t t t t t t t t t t ;+ 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）; 
 
 //通过从google car pos到会场pos来查找标题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}）; 
'b 
 
 $ b $（'＃myModal'）。modal（'show'）
 
 current = elem; （shown.bs.modal，function（）{
 google.maps.event.trigger（sv，resize）; 
 
 $（＃myModal）。 b $ b}）; 
 
}）; 
}）
}）; 
 //创建搜索框并将其链接到UI元素。 
 
 
 $ b函数getLocation（）{
 if（navigator.geolocation）{
 navigator.geolocation.getCurrentPosition（displayOnMap）; 
} 
 else {
 navigator.geolocation.getCurrentPosition（displayOnMapError）; 
} 
}; 
函数displayOnMap（position）{
 
 marker2 = handler.addMarker（{
 lat：position.coords.latitude，
 lng：position.coords.longitude，
图片：{
 url：<％= asset_path'creative / 1499326997_Untitled-2-01.png'％>，
 width：48，
 height：48 
}，
 infowindow：你在这里！
}）; 
 handler.map.centerOn（marker2）; 
 handler.getMap（）。setZoom（10）; 
}; 
 
函数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（）; 
  

I am developing a web app in Rails. When I open a marker, a modal pops up with a street view in a box. I can open one or two markers, but after that I get an error that WebGL has hit a snag. I have tried to look online for resources but nothing makes sense. See below pics for more info. Any help would be greatly appreciated.

First image with error

Here is an image of what my console log looks like:

Here is my JavaScript code in my webapp.

<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>

This was the original code to get the modal to pop up with the information I needed.

$(".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;

In order to add the street view inside of the modal the following code was added:

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 });
    }
});

In order to pass the current lat and long into the street view, I had to put it inside of the same function that the modal is being called on.

UPDATE

I cannot figure how to set var sv = new google.maps.StreetViewPanorama(div); so it is set once and the same map reused for each instance of the modal that is called rather than trying to start and restart a new instance.

Update 2

I cannot figure out how to initially initialize this part:

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

So when I open a modal it does not render a new map it just reuses the same map. I am inclined to write another function but I need some guidance, please.

UPDATE 3

Something else I have noticed is that when I click on one marker it will show the street view filling its square in the modal. When I click on another one sometimes it won't show at all but in most cases, it shows but very tiny in the corner as in this image:

I also noticed that the code for class widget-scene-canvas which comes from Google Maps keeps altering itself from what I originally had it be through my own id styling when I click on more than the first map at separate times.

解决方案

I figured out that I had more then one problem I had three to be exact. Thanks to https://stackoverflow.com/a/19048363/7039895 I was able to figure out that I needed to resize my map inside the modal each time a modal is opened. The script for that which was placed after the modal was opened is:

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

The second issue occurred when I noticed that some locations when I opened a modal would render the google street maps while others would render a google street map but it was solid black like this image:

What I discovered was that I needed to alter the zoom of the rendered street map to 0 because it was at a 1 zoom from the pov of the car and some lats and longs in my map could not zoom while others could and this all depends on where the google car snapped a photo. Here is the code notice where it says zoom I changed that from a 1 zoom to a 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 } );
            }
        })

The last thing I needed to fix was the webGL hit a snag error which kept popping up. Upon further investigation on my end I noticed whether I was in the web app or just exploring google maps it was popping up regardless. It seemed to be an error with chrome in general so I took a look at this article in particular https://www.xtremerain.com/fix-rats-webgl-hit-snag-chrome/ I followed the first example and disabled (see below) from the advanced settings.

Use hardware acceleration when available

After that I went back and tested the map and each location opens with the google street map showing and the webgl hit a snag error no longer appeared.

Here is the final code for the map portion of my web app:

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();

这篇关于重复使用模式内的Google Maps街景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！