0

我有一个动态插入谷歌地图的表格。但是我无法单击任何输入。我相信我需要在某处添加一个听众，但我不确定。

小提琴

    function googlemap() {

    // google map coordinates
    var posY = 37.765700,
        posX = -122.449134,
        location = new google.maps.LatLng(posY,posX),

        // offset location
        posY = posY + 0.055;
        offsetlocation = new google.maps.LatLng(posY,posX);

    var mapOptions = {
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        draggable: true,
        disableDoubleClickZoom: false,
        scrollwheel: false,
        zoom: 12,
        center: offsetlocation,
        // ROADMAP; SATELLITE; HYBRID; TERRAIN;
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    overlay.prototype = new google.maps.OverlayView();

    // create overlay marker
    overlay.prototype.onAdd = function() {

        blip = document.createElement('div'),
        pulse = document.createElement('div');
        blip.className = 'blip';
        pulse.className = 'pulse';

        // createa dialog and grab contents from #mapcontents
        boxText = document.createElement("div");
        boxText.className = "dialog";
        mapContents = $('#mapcontents').html();
        boxText.innerHTML = mapContents;
        $('#mapcontents').remove();
        blip.appendChild(boxText);

        // append 'blip' marker
        this.getPanes().overlayLayer.appendChild(blip).appendChild(pulse);
    }

    // update blip positioning when zoomed
    overlay.prototype.draw = function(){

        var overlayProjection = this.getProjection(),
            bounds = new google.maps.LatLngBounds(location, location),
            sw = overlayProjection.fromLatLngToDivPixel(bounds.getSouthWest()),
            ne = overlayProjection.fromLatLngToDivPixel(bounds.getNorthEast());

        blip.style.left = sw.x + 'px';
        blip.style.top = ne.y + 'px';



        // shift nav into view by resizing header
        var w = $('.dialog').width(),
            w = (w / 2) + 25,
            w = '-' + w + 'px';

            h = $('.dialog').height(),
            h = (h) + 100,
            h = '-' + h + 'px';

        $('.dialog').css({
            'margin-top' : h,
            'margin-left' : w
        });


    };

    var map = new google.maps.Map(document.getElementsByClassName('map')[0], mapOptions);

    // explicitly call setMap on this overlay
    function overlay(map) {
        this.setMap(map);
    }

    // center map when window resizes
    google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(location) });

    // center map when zoomed
    google.maps.event.addListener(map, 'zoom_changed', function() { map.setCenter(location) });

    // I have nfi what I'm doing but I think this click listener is part of the solution.
    google.maps.event.addListener('.dialog', 'click', function() {

        alert('ok');
    });

    // process contact form
    google.maps.event.addListener(map, 'domready', function() {

        $('button').click(function(e) {
            (e).preventDefault();

            alert('ok');

            return false;

            var name    = $(".contactform input[name='name']"),
                email   = $(".contactform input[name='email']"),
                message = $(".contactform textarea[name='message']"),
                error = false;

            // clear validation errors
            $('#contact input, #contact textarea').removeClass('error');

            if(name.val().length < 1)
                name.addClass("error");

            if(!/^[a-zA-Z0-9._+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,4}(\.[a-zA-Z]{2,3})?(\.[a-zA-Z]{2,3})?$/.test(email.val()))
                email.addClass("error");

            if(message.val().length < 1)
                message.addClass("error");

            // if error class exists
            if($(".error").length) return false;

            $(this).attr('disabled', true).prepend('<i class="load animate-spin"></i>');

            $.ajax({
                type: "post",
                dataType: "json",
                url: "lib/sendmail.php",
                data: $("#contactform").serialize()
            })
            .always(function(data) {

                $('h5').animate({opacity:0},function(){
                        $('h5').text("Email Sent!!")
                    .animate({opacity:1});
                });

                $('.contactform').animate({opacity:0},function(){
                        $('.contactform').html("<p class='success'>Thank You for your form submission. We will respond as soon as possible.</p>")
                    .animate({opacity:1});
                })

            });

        });

        return false;
    });


    // add overlay
    overlay = new overlay(map);
}

知道为什么我不能点击输入吗？

4

5 回答 5

1

您只需要阻止mousedown地图事件的传播即可使输入可点击：

google.maps.event.addDomListener(blip, 'mousedown', function (e) {
    e.cancelBubble = true;
    if(e.stopPropogation) {
        e.stopPropagation();
    }
});

你可以做同样的事情dbclick来防止地图缩放：http: //jsfiddle.net/gfKWz/1/

于 2013-02-03T21:44:05.563 回答
1

所有这些输入的点击事件都很好，首先这里的问题是你的代码永远不会执行，因为没有domready-eventgoogle.maps.Map

改变这个：

google.maps.event.addListener(map, 'domready', function () {

进入这个：

google.maps.event.addListenerOnce(map, 'tilesloaded', function () {

用于观察您可能使用的事件$.on()，例如：

$(map.getDiv()).on('click','button',function (e) {/*some code*/});

演示：http: //jsfiddle.net/doktormolle/jcfDu/

于 2013-02-03T22:03:57.160 回答
0

您的事件必须添加到onAdd函数中。

目前，事件处理程序是在元素之前创建的。所以它不会捕捉到对这个特定元素的点击。

http://jsfiddle.net/NeekGerd/duEEt/4/

或者您可以为覆盖的绑定创建一个新函数，只是为了干净代码：

overlay.prototype.onAdd = function() {

    [...]

    this.bindings();
}

overlay.prototype.bindings = function(){
   $("button").on("click",function(){
     alert("Click");
     return false;
   }
}

现在我对你的输入问题没有真正的解决方案。也许通过将mousedown事件重新附加到它们，并强制它们focus()：

$("input,textarea").on("mousedown",function(){$(this).focus();});

与您的复选框相同。

于 2013-02-03T20:58:49.280 回答
0

您使用$('button').clickwhich 在按钮出现在 dom 之前触发。.click()将处理程序绑定到 dom 上的所有当前元素。

更好地使用$('button').on('click', function(){});它将单击事件处理程序绑定到页面上所有当前和将来的按钮实例。如果您在页面上动态添加内容，这将特别方便。通过ajax或其他方式。

在此处http://api.jquery.com/on/阅读有关 jQuery .on() 的更多信息

于 2013-02-03T21:27:47.563 回答
0

另一方面，既然您使用 jQuery，为什么不一直使用它呢？

就像你可以这样做：

$('#mapcontents')
    .clone()
    .wrap('<div class="dialog" />')
    .wrap('<div class="blip />')
    .appendTo( *selector* );

为了快速构建一些 html 并将其附加到所选元素。比您获得的 DOM 代码更具可读性（因此更易于维护）。因为无论如何你已经使用了 jQuery。

于 2013-02-03T21:51:44.160 回答