原型,谷歌地图Ajax API V3 - 错误,但不知道为什么。 - g.e未定义

时间:2011-06-29 15:27:32

标签: javascript google-maps prototypejs

我正在尝试编写一个简单的(在我的脑海中; 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>

2 个答案:

答案 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);