[英]It is possible to connect Google Maps API v3 page with another page?
我需要在页面左侧放置地址列表,在右侧放置Google Maps(API v3)(例如,通过iframe)。 因此,如果我点击父页面上的地址,Google地图会缩放到右侧的此地址。
这有可能吗? 如果是的话,我可以在哪里阅读? 或者你能给我一些例子。 谢谢。
你必须使用和iframe? 这是一个例子: http : //jsfiddle.net/2YQg6/
这是一个使用类似技术的应用程序: 住房地图
当然。
这是一个粗略的例子( 这里也可以看到)
<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®ion=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值并从那里开始。
您可以将文本地址放入其他输入字段 - 工作方式相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.