0

我正在做一个项目，我需要将谷歌地图标记拖到某个 dom 元素（例如我的代码中的 img），当我释放鼠标时，我需要触发一个函数。

这是我的做法：

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }body { height: 100%; margin: 0; padding: 0 }#map-canvas
        { height: 100% }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
    </script>
    <script type="text/javascript">
        var map;
        var tempMarker;
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(35.861660, 104.1953970),
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
            addMarkers();
        }
        function addMarkers() {
            var marker0 = new google.maps.Marker({
                position: new google.maps.LatLng(32.04, 118.78),
                map: map,
                draggable: true,
                raiseOnDrag: false
            });
            google.maps.event.addListener(marker0, 'dragstart',
            function(event) {
                tempMarker = this.getPosition();
                var addToPlan = "<div style='width: 130px; height: 38px;position: absolute;right: 50px;bottom: 50px;' id='addToPlan' ><img id='add_img' src='http://www.w3schools.com/html/img_w3slogo.gif' /></div>";
                $(document.body).append(addToPlan);
                $('#add_img').mouseup(function() {
                    alert('mouseup');
                });
            });
            google.maps.event.addListener(marker0, 'dragend',
            function(event) {
                this.setPosition(tempMarker);
                // $('#addToPlan').remove();
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <div id="map-canvas" />
</body>

</html>

不幸的是，它不适用于 IE7。如果你在图片上拖一个标记，它不会触发该功能，但是，如果你直接点击图片，可以捕获mouseup事件！

注意：我没有在拖动结束时删除img元素，所以你可以直接点击img，但是如果你拖动标记两次，它就无法捕获mouseup事件。

4

1 回答 1

0

通过mouseup不能被解雇，mousemove行为就像mouseup。

于 2013-05-30T09:49:29.167 回答