0

У меня есть попытка попытаться встроить Google StreetView для определенного местоположения на веб-странице. Обычно я просто использую встроенный iFrame Google, но платформа, на которой размещена страница, не позволяет iFrames.Запись строки запроса в HTML-документ

Так что, если я не могу использовать iFrame, я должен пойти традиционным способом использования чистого документа HTML и истинного подхода Google для встраивания StreetView. Это хорошо, за исключением того, что я хочу параметризовать URL-адрес, чтобы пользователь мог передать строку запроса, чтобы сообщить StreetView, какое местоположение должно отображаться.

http://my.site.com/streetview.html&y=37.869260&x=-122.254811 

Google, StreetView embed document дает мне отличный пример сбросив Streetview прямо в HTML-документ.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Street View</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #street-view { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="street-view"></div> 
    <script> 
     var panorama; 
     function initialize() { 
     panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'), 
      { 
       position: {lat: 37.869260, lng: -122.254811}, 
       pov: {heading: 165, pitch: 0}, 
       zoom: 1 
      }); 
     } 
    </script> 
    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=[YourAPIKey]&callback=initialize"> 
    </script> 
    </body> 
</html> 

Я пытаюсь изменить раздел Script для записи значения, переданные в «Y» и «х» запроса строк в «ю» и переменным Streetview элемента «LNG», так что StreetView всегда будет быть в любом месте, которое я передаю в виде строк запроса y и x в URL.

<script> 
    var panorama; 
    function initialize() { 
    panorama = new google.maps.StreetViewPanorama(
     document.getElementById('street-view'), 
     { 
      position: {lat: 37.869260, lng: -122.254811}, 
      pov: {heading: 165, pitch: 0}, 
      zoom: 1 
     }); 
    } 
</script> 

ответ

1

Если у вас есть правильный вопрос, вы хотите получить значения длины и долготы в строке запроса.

Во-первых, вам нужно получить параметры запроса, добавьте этот FUNCTION-

function getParameterByName(name, url) { 
     if (!url) url = window.location.href; 
     name = name.replace(/[\[\]]/g, "\\$&"); 
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", "i"), 
      results = regex.exec(url); 
     if (!results) return null; 
     if (!results[2]) return ''; 
     return decodeURIComponent(results[2].replace(/\+/g, " ")); 
    } 

Затем измените сценарий следующим образом -

<script> 
    var panorama; 
    var latt,longg; 
    latt = parseFloat(getParameterByName('y')); 
    longg = parseFloat(getParameterByName('x')); 
    function initialize() { 
    panorama = new google.maps.StreetViewPanorama(
     document.getElementById('street-view'), 
     { 
      position: {lat: latt, lng: longg}, 
      pov: {heading: 165, pitch: 0}, 
      zoom: 1 
     }); 
    } 
</script> 

Позвольте мне знать, если я неправильно понял ваш вопрос.

+0

Это почти сработало, но я получил ошибку в консоли JavaScript; js? InvalidValueError: setPosition: не LatLng или LatLngLiteral: в свойствах lat: не число – MrBubbles

+0

Использовать функцию parseInt и преобразовывать решетку и longg в целое число –

+0

См. мой обновленный ответ –

 Смежные вопросы

  • Нет связанных вопросов^_^