我正在尝试编写一个简单的(在我的脑海中; D)页面,用户可以在其中输入位置并将其显示在地图上。在后台应该有一些字段:
纬度,经度,缩放
当用户输入新位置,移动地图或更改缩放级别时,应更新这些内容。
请在下面找到我的代码,我正在使用Prototype lib。初始加载似乎有效,但是当移动地图时,我在控制台中收到错误:
g.e未定义 - main.js第20行
并且在Zoom上,不会触发事件。在进行文本搜索时,LocationFound会抱怨SetLatLong不是函数吗?
请帮忙,过去几个小时我一直在圈子里! :(
<html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var Map = {
gmap : '',
geocoder : '',
map_container : '',
geocode_input : '',
geocode_form : '',
CreateMap : function(){
this.map_container = $('gmap');
this.geocode_form = $('gmap_form');
this.geocode_input = $('gmap_input');
try {
this.ConfigureMap();
this.SetDefaultLocation();
this.ConfigureGeocoder();
this.Listen();
} catch(err) {
console.debug(err);
}
},
ConfigureMap : function() {
var DefaultMapOptions = {
zoom: 3,
center: new google.maps.LatLng(43.834526782236814, -37.265625),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.gmap = new google.maps.Map(this.map_container, DefaultMapOptions);
},
ConfigureGeocoder : function() {
this.geocoder = new google.maps.Geocoder();
},
SetDefaultLocation : function() {
//TODO: Check if a location string is already present
//if (google.loader.ClientLocation) { //default to IP location if possible - not using loader anymore so comment out for now.
// this.SetLatLong(google.loader.ClientLocation.latitude,google.loader.ClientLocation.longitude, 8);
//}
},
SetLatLong : function(lat, lon, zoomLevel){
this.gmap.setCenter(new google.maps.LatLng(lat, lon));
if (zoomLevel){
this.gmap.setZoom(zoomLevel);
}
$('latitude').value = lat;
$('longitude').value = lon;
},
Listen : function() {
google.maps.event.addListener(this.gmap, 'dragend', this.MapMoved());
google.maps.event.addListener(this.gmap, 'zoom_changed', this.Zoomed());
Event.observe(this.geocode_form, 'submit', this.FindLocation(this.geocode_input));
},
Zoomed : function (){
$('zoom').value = this.gmap.getZoom();
},
MapMoved : function(){
console.debug('map moved');
var position = this.gmap.getCenter();
this.SetLatLong(position.lat(), position.lng());
},
FindLocation : function(location){
if (location){
var address = location.value;
if (address){
try {
this.geocoder.geocode( { 'address' : address }, this.LocationFound );
} catch(err) {
console.debug(err);
}
}
}
return false;
},
LocationFound : function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
//THIS IS DYING TOO? :(
this.SetLatLong(results[0].geometry.location.lat(), results[0].geometry.location.lng());
} else {
alert("Geocode was not successful for the following reason: " + status);
}
}
};
document.observe('dom:loaded', function(event){
Map.CreateMap();
}.bind(this));
</script>
<style>
div#gmap {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<form action="http://maps.google.com/maps" id="gmap_form">
<p>
<label for="geocodeInput">Location Text:</label>
<input type="text" name="q" id="gmap_input">
<input type="submit" value="Zoom to place">
</p>
</form>
<div id="gmap"></div>
<p><strong>Latitude, Longitude:</strong> <input type="text" id="latitude"><input type="text" id="longitude"></span></p>
<p><strong>Zoom:</strong> <input type="text" id="zoom"></p>
</body>
答案 0 :(得分:2)
这有效
google.maps.event.addListener(this.gmap, 'dragend', function () { Map.MapMoved() });
答案 1 :(得分:0)
接受的答案并不能说明这一点,但问题在于:
google.maps.event.addListener(this.gmap, 'zoom_changed', this.Zoomed());
其中:
Zoomed : function () { $('zoom').value = this.gmap.getZoom(); },
特别注意调用的结果缩放(即this.Zoomed()返回的undef)被设置为事件处理程序,而不是自身缩放;这里的错误(g.e未定义)是将无效值传递给maps事件处理程序API的特征。
如果代码如下,则此代码将起作用:
google.maps.event.addListener(this.gmap, 'zoom_changed', this.Zoomed);