Question

当我们在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：我知道必须有办法，但我的时间很短;需要一个解决方案 - 用Google搜索，但还没找到出路。

Answer 1

好;最后我能够做到 - 虽然不完全是谷歌地图的100％重复。

以下是代码 - 仅发布以供其他人参考：

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

Answer 2

要发现街景是否存在，请使用GStreetviewClient.getNearestPanorama（）。如果附近有回拨，您的回调只会收到状态码200.

由于infowindow代码已从主代码移回外部模块，因此在infowindow中显示streetview现在变得复杂。这意味着在将INFowindow内容添加到DOM之前可能存在显着延迟，并且GStreetviewPanorama期望容器已经在DOM中。 this page后半部分的技巧可能有效，或者您可能需要添加自己的代码以等待目标div在调用GStreetviewPanorama之前可以访问。

Answer 3

我创建了JQuery插件（GoogleMaps），允许用户显示街景全景图并添加街景视图。

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

在标记内集成Google街景

3 个答案: