एक मॉडेल

Question

के अंदर एक Google मानचित्र सड़क दृश्य का पुन: उपयोग करें मैं रेल में एक वेब ऐप विकसित कर रहा हूं। जब मैं मार्कर खोलता हूं, तो बॉक्स में एक सड़क दृश्य के साथ एक मॉडल पॉप-अप होता है। मैं एक या दो मार्कर खोल सकता हूं, लेकिन इसके बाद मुझे एक त्रुटि मिलती है कि वेबजीएल ने एक झटके मारा है। मैंने संसाधनों के लिए ऑनलाइन देखने की कोशिश की है लेकिन कुछ भी समझ में नहीं आता है। अधिक जानकारी के लिए चित्रों के नीचे देखें। किसी भी तरह की सहायता का स्वागत किया जाएगा।

यहाँ मेरी webapp में मेरी जावास्क्रिप्ट कोड है:

First image with error

यहाँ मेरी सांत्वना लॉग कैसा दिखता है की एक छवि है।

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

मोडल निम्नलिखित कोड जोड़ा गया है के अंदर सड़क दृश्य जोड़ने के लिए:

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

आदेश वर्तमान अक्षांश और लंबे समय से सड़क दृश्य में पारित करने के लिए, मैं इसे डाल करने के लिए किया था उसी कार्य के अंदर जिस पर मोडल को बुलाया जा रहा है।

अद्यतन

मैं कैसे स्थापित करने के लिए समझ नहीं सकता var sv = new google.maps.StreetViewPanorama(div); तो यह एक बार सेट और एक ही नक्शे मोडल की प्रत्येक आवृत्ति शुरू करने और एक नया उदाहरण को पुनः आरंभ करने की कोशिश कर के बजाय कहा जाता है के लिए पुन: उपयोग किया जाता है।

अद्यतन 2

मैं समझ नहीं कैसे शुरू में इस हिस्से को प्रारंभ करने के लिए:

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

तो जब मैं एक मॉडल को खोलने के लिए यह एक नया नक्शा यह सिर्फ एक ही नक्शे पुनः उपयोग कर लेता प्रदर्शित नहीं होता है। मैं एक और समारोह लिखने के इच्छुक हूं लेकिन मुझे कुछ मार्गदर्शन की ज़रूरत है।

अद्यतन किसी और मैंने देखा है 3

कुछ कि जब मैं एक मार्कर पर क्लिक करें यह सड़क दृश्य मोडल में अपने वर्ग भरने दिखाएगा है। जब मैं एक और एक पर क्लिक करें कभी कभी यह सब पर नहीं दिखाया जाएगा लेकिन ज्यादातर मामलों में, यह पता चलता है, लेकिन बहुत ही इस छवि में के रूप में कोने में छोटे:

मैं भी वर्ग widget-scene-canvas के लिए कि कोड देखा जो Google मानचित्र से आता है, वह स्वयं को अपने स्वयं के आईडी स्टाइल के माध्यम से मूल रूप से बदलता रहता है जब मैं अलग-अलग समय पर पहले मानचित्र से अधिक पर क्लिक करता हूं।

Answer 1

मुझे पता चला कि मेरे पास एक और समस्या थी, मेरे पास तीन सटीक थे। https://stackoverflow.com/a/19048363/7039895 के लिए धन्यवाद, मैं यह समझने में सक्षम था कि प्रत्येक बार एक मोडल खोले जाने पर मुझे मोडल के अंदर अपने मानचित्र का आकार बदलने की आवश्यकता होती है।उस के लिए स्क्रिप्ट जिसके बाद मोडल खोला गया था रखा गया था है:

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

दूसरे अंक हुई जब मुझे लगता है कि कुछ स्थानों पर देखा जब मैं खोला एक मॉडल गूगल स्ट्रीट मैप्स प्रस्तुत करना होगा जबकि अन्य एक गूगल सड़क के नक्शे प्रस्तुत करना होगा लेकिन यह इस छवि की तरह ठोस काला था:

क्या मुझे लगता है कि मैं 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 में कोई समस्या त्रुटि जो अप पॉपिंग रखा पर सफल रही। मेरे अंत में आगे की जांच के बाद मैंने देखा कि क्या मैं वेब ऐप में था या सिर्फ Google मानचित्रों की खोज कर रहा था, चाहे वह पॉप-अप हो रहा था। यह सामान्य रूप से क्रोम के साथ एक त्रुटि प्रतीत होता था इसलिए मैंने इस आलेख को विशेष रूप से https://www.xtremerain.com/fix-rats-webgl-hit-snag-chrome/ में देखा, मैंने उन्नत सेटिंग्स से पहले उदाहरण और अक्षम (नीचे देखें) का पालन किया।

हार्डवेयर त्वरण का उपयोग उपलब्ध

है कि मैं वापस चला गया और नक्शा परीक्षण किया है और प्रत्येक स्थान गूगल सड़क के नक्शे दिखा के साथ खुलता है और WebGL में कोई समस्या त्रुटि नहीं रह गया है दिखाई दिया मारा के बाद।

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

Answer 2

यह समस्या वास्तव में, WebGL और जे एस के साथ कुछ नहीं, (अच्छी तरह से एक तरह से नहीं) होता है, क्या मेरा अनुमान है कि है, क्योंकि है कि हर बार जब आप एक स्थान पर क्लिक करें, तो आप एक initialising रहे हैं नया वेबजीएल उदाहरण और आपके पिछले मानचित्र (जिसे पहले शुरू किया गया था) का पुन: उपयोग नहीं कर रहा है, जिसका कारण है कि आप वेबगेल को स्नैग हिट करने से पहले केवल 1 या 2 खोल सकते हैं।

और यह ब्राउज़र के लिए अविश्वसनीय रूप से भारी हो जाता है, इसलिए यह दोपहर के भोजन के लिए जाने का समय तय करता है।

जैसा कि मैं अनुमान लगा रहा हूं कि आप क्या करने का प्रयास कर रहे हैं, एक नया नक्शा प्रस्तुत करने के लिए AJAX का उपयोग करें, और आसानी से क्या होगा, उस समय मानचित्र को नष्ट करने में सक्षम होना चाहिए, लेकिन दुर्भाग्यवश, Google मानचित्र एपीआई में मैप इंस्टेंस को नष्ट करने के लिए कोई फ़ंक्शन नहीं है, (मैपबॉक्स और अन्य एपिस डू)। ,

हाय सब लोग

पहले, क्षमा याचना है कि हम अब तक इस मुद्दे पर खामोश किया गया है: लेकिन गूगल आधिकारिक तौर पर के रूप में यह बताते हैं।

अगला, वहां एक आसान काम है, जो आपके मानचित्र उदाहरणों का पुन: उपयोग करना है। यदि कोई अच्छा कारण है कि आप ऐसा क्यों नहीं कर सकते हैं तो मुझे पता होना अच्छा लगेगा।

मैं इसे लेबल कर रहा हूं क्योंकि यह ठीक नहीं होगा, क्योंकि यह तकनीकी रूप से कठिन है। हम वास्तव में इस बात पर निश्चित नहीं हैं कि हम कितने स्थान लीक कर रहे हैं :-( इसके अतिरिक्त, हमें शायद map.destroy() विधि का परिचय देना होगा। अन्यथा, हम कैसे जान सकते हैं कि आप हैं या नहीं की योजना बना नक्शा पुन: उपयोग के लिए? जावास्क्रिप्ट विनाशकर्ता नहीं है, इसलिए हम यह नहीं जान सकते आप दूर की वस्तु को अपने संदर्भ के फेंक दिया गया है।

क्षमा बुरी खबर के वाहक होने के लिए।

तो आपको यह सुनिश्चित करने की आवश्यकता है कि हर बार जब आप एक नया आंशिक प्रस्तुत करते हैं तो आप एक नया नक्शा शुरू नहीं कर रहे हैं। लेकिन इसके बजाय आपने पहले शुरू किया था।

आपकी समस्या यहाँ रहता है:

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

और आप आप कैसे पॉप-अप कॉल कर रहे हैं के ज्यादा नहीं दिखा रहे हैं, इसलिए मैं वास्तव में आप के लिए एक रास्ता सुझाव नहीं दे सकते। अगर आपको यह समझ में आता है तो मुझे बताएं।