Question

我需要在页面左侧放置地址列表，在右侧放置Google Maps（API v3）（例如，通过iframe）。因此，如果我点击父页面上的地址，Google地图会缩放到右侧的此地址。

有可能吗？如果是的话，我可以在哪里阅读？或者你能给我一些例子。感谢。

Answer 1

你必须使用和iframe？以下是一个示例：http://jsfiddle.net/2YQg6/

以下是使用类似技术的应用：Housing maps

Answer 2

不确定

这是一个粗略的例子（可以看到here）

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ExtJS Google Maps Integration</title>

        <!-- Google Map API -->
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map_canvas { height: 100% }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false&region=US"></script>

    </head>
    <body>
        <div id="map_canvas" style="width:50%; height:50%;"></div>
        <input id="lat" type="text" value="40.714623"></input>
        <input id="lng" type="text" value="-74.006605"></input>

        <script>
            var options = {
            zoom: 15,
            disableDefaultUI: true,
            zoomControl: true,
            zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.TOP_LEFT
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map_canvas"), options);

            function updateLatLng() 
            {
                var lat = document.getElementById( "lat" ).value;
                var lng = document.getElementById( "lng" ).value;
                var latLng = new google.maps.LatLng( lat , lng );
                map.setCenter( latLng );
            }

            function updateAddress() 
            {
                var address = document.getElementById( "address" ).value;
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode( { address: address }, function( results, status )
                {
                     var latLng = new google.maps.LatLng( results[0].geometry.location.Pa, results[0].geometry.location.Qa );
                    map.setCenter( latLng  );
                } );
            }
        </script>

        <button type="button" onClick="updateLatLng()">Update</button>
        <input id="address" type="text" value="NYC"></input>
        <button type="button" onClick="updateAddress()">Update</button>
    </body>
</html>

在示例中 - 您将纬度和经度值放在输入字段中（可能就像链接一样容易）并单击更新。您可以更改值并查看它是否正确更新。在这种情况下，您必须将地址映射到lat / lng值并从那里开始。

您可以将文本地址放入其他输入字段 - 工作方式相同。

可以将Google Maps API v3页面与其他页面连接起来吗？

2 个答案: