个人中心
gpt4 book ai didi

javascript - 原型(prototype)，Google Maps Ajax API V3 - 错误但不确定原因。 - g.e 未定义

转载 作者：行者123 更新时间：2023-11-30 18:42:16 25 4
gpt4 key购买 nike

我正在尝试编写一个简单的(在我脑海中；D)页面，用户可以在其中输入位置并将其显示在 map 上。在后台应该有一些字段:

纬度、经度、缩放

这些应该在用户输入新位置、移动 map 或更改缩放级别时更新。

请在下面找到我的代码，我为此使用了原型(prototype)库。初始加载似乎有效，但是当移动 map 时，我在控制台中收到错误:

ge 未定义 - 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>

最佳答案

这行得通

google.maps.event.addListener(this.gmap, 'dragend', function () { Map.MapMoved() });

关于javascript - 原型(prototype)，Google Maps Ajax API V3 - 错误但不确定原因。 - g.e 未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6523171/

25 4 0
文章推荐： java - 我有一个在 "some"客户端计算机上有问题的第 3 方数字签名 Java 小程序，我知道如何验证版本但是。
文章推荐： c# - VSTO:在 Excel 工作表上绘图
文章推荐： php - 如何将 php 值传递给 javascript？
文章推荐： c - 将当前时间更新一秒的程序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com