Интеграция Google Street View внутри маркера - PullRequest
Новая
       12

Интеграция Google Street View внутри маркера

3 голосов
/ 16 ноября 2009

Когда мы ищем адреса на веб-сайте Карт Google, если для этого адреса доступен просмотр улиц, его маркер добавляет небольшое изображение со ссылкой для просмотра Просмотр улиц для этой области.

У меня вопрос, могу ли я интегрировать такую ​​вещь с моей пользовательской картой?

Примером может быть:

http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=30+Daniel+Webster+Hwy,+East+Merrimack,+NH+03054&sll=35.101934,-95.712891&sspn=48.649293,93.076172&ie=UTF8&hq=&hnear=30+Daniel+Webster+Hwy,+East+Merrimack,+Hillsborough,+New+Hampshire+03054&z=16

Проверьте маркер - я хочу что-то вроде этого;

С уважением,

PS: я знаю, что должен быть способ, но у меня очень мало времени; нужно решение как можно скорее - гуглил, но не нашел выхода.

Ответы [ 3 ]

3 голосов
/ 17 ноября 2009

Хорошо; наконец-то я смог это сделать - хотя не совсем на 100% дубликат карт Google.

Ниже приведен код - просто опубликовать для дальнейшего использования для других: 

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEY" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    var map;
    var geocoder;

    function load()
    {
        if (GBrowserIsCompatible()) 
        {
            map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(40, -80), 1);
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.setZoom(14);

            geocoder = new GClientGeocoder();
            geocoder.getLocations( "<%=me.Address %>", addAddressToMap );
        }
    }

    function addAddressToMap( response )
    {
        if (!response || response.Status.code != 200)
        {
            alert("Sorry, we were unable to geocode that address");
            return;
        }

        place = response.Placemark[0];
        point = new GLatLng( place.Point.coordinates[1], place.Point.coordinates[0] );

        var lat = place.Point.coordinates[1];
        var lng = place.Point.coordinates[0];

        var letter = String.fromCharCode( "A".charCodeAt( 0 ) );

        var  baseIcon = new GIcon();
        baseIcon.iconSize = new GSize( 32, 32 );
        baseIcon.shadowSize = new GSize( 37, 34 );
        baseIcon.iconAnchor = new GPoint( 9, 34 );
        baseIcon.infoWindowAnchor = new GPoint( 9, 2 );
        baseIcon.infoShadowAnchor = new GPoint( 18, 25 );

        marker = new GMarker( point );

        map.addOverlay( marker );
        map.panTo( point );
        marker.openInfoWindowHtml( "<strong><%=me.Name %></strong><br /><%=me.AddressForDisplay %>" );

        var point = new GLatLng( lat, lng );
        panoramaOptions = { latlng:point };
        pano = new GStreetviewPanorama( document.getElementById( "streetview" ), panoramaOptions );

        GEvent.addListener( pano );
        GEvent.addListener( pano, "error", handleNoFlash );
    }
    function handleNoFlash( code )
    {
        if ( code == GStreetviewPanorama.ErrorValues.FLASH_UNAVAILABLE )
            alert( 'You need flash player to view the panorama.' );

        document.getElementById( "toggle" ).style.display = 'none';
    }
    function Toggle()
    {
        if( document.getElementById( "streetview" ).style.display == 'none' )
        {
            document.getElementById( "streetview" ).style.display = 'block';
            document.getElementById( "map" ).style.display = 'none'
            document.getElementById( "toggle" ).innerHTML = "<a href='javascript:Toggle();'>Map View</a>";
        }
        else
        {
            document.getElementById( "map" ).style.display = 'block';
            document.getElementById( "streetview" ).style.display = 'none'
            document.getElementById( "toggle" ).innerHTML = "<a href='javascript:Toggle();'>Street View</a>";
        }
    }
    //]]>
</script>

А для тела: 

<body onload="load()" onunload="GUnload()">
        <div id="toggle"><a href='javascript:Toggle();'>Street View</a></div>
        <div id="map" style="width:650px; height: 400px;"></div>
        <div id="streetview" style="width:650px; height: 400px; display:none;"></div>
1 голос
/ 24 декабря 2009

Я создал плагин JQuery (imGoogleMaps), который позволяет пользователям отображать панораму улиц, а также добавлять наложение улиц.

http://grasshopperpebbles.com/ajax/jquery-plugin-imgooglemaps-0-9-multiple-addresses-street-view/

1 голос
/ 17 ноября 2009

Чтобы узнать, существует ли вид улицы, используйте GStreetviewClient.getNearestPanorama (). Ваш обратный вызов получит код состояния 200, только если он найден поблизости.

Отображение вида улицы в информационном окне теперь осложняется тем, что код информационного окна был перемещен обратно из основного кода во внешний модуль. Это означает, что может быть значительная задержка, прежде чем содержимое информационного окна будет добавлено в DOM, а GStreetviewPanorama ожидает, что контейнер уже находится в DOM. Уловка во второй половине этой страницы может сработать, или вам может потребоваться добавить собственный код, чтобы дождаться, пока целевой div станет доступным, прежде чем вызывать GStreetviewPanorama.

...