个人中心
gpt4 book ai didi

javascript - Google Map V3 上的可拖动图标 - 设置为 Draggable=True，但不能拖动它

转载 作者：行者123 更新时间：2023-11-30 06:28:02 25 4
gpt4 key购买 nike

除了最后一件事外，我已经根据我的喜好在这个 Google map V3 上进行了所有工作。现在，如果您加载 map ，该 map 能够搜索地点并将图标从 map 外部拖到 Google map 中。 但是，一旦图标位于 map 内部，我就无法拖动它。我一直在无休止地搜索我的代码哪里出错了。

下面是我阅读的许多例子中的几个例子:

Link1 , Link2 , Link3 , Link4 (链接4是我需要的，但进一步检查后无法连接代码)

我觉得我非常接近，但我相信我只是没有声明正确的变量或没有正确连接它们。 下面是代码，这是一个FIddle这可以让你了解我的问题。 (尝试拖动图标一次，然后在 map 内再次拖动)

<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
    html {
        height: 100%;
    }
    body {
        height: 97%;
    }
    #map-canvas {
        width: 70%;
        height: 100%;
    }
    #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -30%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        }
    #shelf {
        position: absolute;
        margin-right: 5px;
        top: 25px;
        left: 70%;
        height: 98%;
        width: 30%;
        float: right;
    }
    #draggable {z-index:1000000000;}
    #draggable2 {z-index:1000000000;}
    #draggable3 {z-index:1000000000;}
    .ecostation {
        margin-left: auto;
        margin-right: auto;
        border: 1.0px solid #F0F0F0;
        border-radius: 5.0px 5.0px 5.0px 5.0px;
        width: 85%;
        text-align: center;
    }
    #wrapper {
        display: table-row;
        border: 1.0px solid rgb(204,204,204);
        border-radius: 5.0px 5.0px 5.0px 5.0px;
    }
    #wrapper div {
        display: table-cell;
        border-radius: 10.0px 10.0px 10.0px 10.0px;
        width: 12.5%;
    }
    #wrapper div img {
        display: block;
        padding: 5.0px;
        margin: 5.0px auto;
        text-align: center;
    }
    #wrapper div h5, #wrapper div p {
        text-align: center;
        font-size: 11px;
        margin-top: -10px;
        font-weight: 800;
    }
    .title {
        margin-left: 7%;
        color:  #F0F0F0;
        font-weight: 600;
    }
    #target {
    width: 345px;
    }
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
    $(document).ready(function() {
            $("#draggable").draggable({helper: 'clone',
                stop: function(e) {
                    var point=new google.maps.Point(e.pageX,e.pageY);
                    var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
                    var icon = $(this).attr('src');
                    placeMarker(ll, icon);
                }
            });
            $("#draggable2").draggable({helper: 'clone',
                stop: function(e) {
                    var point=new google.maps.Point(e.pageX,e.pageY);
                    var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
                    var icon = $(this).attr('src');
                    placeMarker(ll, icon);
                }
            }); 
        });
</script>
<script>
    // This example adds a search box to a map, using the
    // Google Places autocomplete feature. People can enter geographical searches.
    // The search box will return a pick list containing
    // a mix of places and predicted search terms.
        function initialize() {
            var markers = [];
            var map = new google.maps.Map(document.getElementById('map-canvas'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var defaultBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(-33.8902, 151.1759),
                new google.maps.LatLng(-33.8474, 151.2631));
            map.fitBounds(defaultBounds);

    // Create the search box and link it to the UI element.
        var input = document.getElementById('target');
        var searchBox = new google.maps.places.SearchBox(input);
    // [START region_getplaces]
    // Listen for the event fired when the user selects an item from the
    // pick list. Retrieve the matching places for that item.
        google.maps.event.addListener(searchBox, 'places_changed', function() {
            var places = searchBox.getPlaces();
            for (var i = 0, marker; marker = markers[i]; i++) {
                marker.setMap(null);
            }
    // For each plce, get the icon, place name, and location.
        markers = [];
        var bounds = new google.maps.LatLngBounds();
        for (var i = 0, place; place = places[i]; i++) {
            var image = {
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(25, 25)
            };

    // Create a marker for each place.
        var marker = new google.maps.Marker({
            map: map,
            icon: image,
            title: place.name,
            position: place.geometry.location
            });
            markers.push(marker);
            bounds.extend(place.geometry.location);
        }   
        map.fitBounds(bounds);
        });
    // [END region_getplaces]
    // Bias the SearchBox results towards places that are within the bounds of the
    // current map's viewport.
        google.maps.event.addListener(map, 'bounds_changed', function() {
            var bounds = map.getBounds();
            searchBox.setBounds(bounds);
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        function placeMarker(location, icon) {
            var marker = new google.maps.Marker({
                position: location, 
                map: map,
                draggable:true,
                icon: icon                     
            });
        }
</script>
</head>
<body>
<div id="map-canvas"></div>
    <div id="panel">
        <input id="target" type="text" placeholder="Search Box">
    </div>
 <div id='shelf'>
    <div class="ecostation">
        <div id="wrapper">
            <div>
                <img src="https://cdn1.iconfinder.com/data/icons/mobile-development-icons/30/Map_marker.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
                <p>Trash/Compost</p>
            </div>
            <div>
                <img src="https://cdn1.iconfinder.com/data/icons/large-tab-bar-icons/30/Start_flag.png" id="draggable2" title="Estation Trash" alt="Estation Trash"/>
                <p>Trash</p>
            </div>
            <div>
                <img src="http://i1288.photobucket.com/albums/b489/Wallace_Adams/bth_facebook-icon-30x30_zpsb49e1af3.jpg" id="draggable3" title="Estation Recycling" alt="Estation Recycling"/>
                <p>Recycle</p>
            </div>
        </div>
    </div>
</div>

</html>

代码结束

如果你们能告诉我那就太好了!另外，我注意到 marker 被声明了两次。这是问题之一吗？我尝试声明其他内容，但没有成功。我也遇到过这段代码，但不确定它在这种情况下是否有帮助

var overlay;
overlay = new google.maps.OverlayView();
            overlay.draw = function() {};
            overlay.setMap(map);

可能认为它必须对下面的这段代码做些什么？

function placeMarker(location, icon) {
        var marker = new google.maps.Marker({
            position: location, 
            map: map,
            draggable:true,
            icon: icon                     
        });
    }

但话又说回来，不知道哪里出了问题，我是否正确连接了变量？

非常感谢帮助，我非常接近完成我想在这张 map 上完成的任务

最佳答案

检查以确保您没有使用 svg 图像作为图标。它们似乎适用于 FireFox 和 Chrome，但不适用于 IE

关于javascript - Google Map V3 上的可拖动图标 - 设置为 Draggable=True，但不能拖动它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19823247/

25 4 0
文章推荐： java - 使用 JaVers 进行异步审核
文章推荐： javascript - 动态加载图像缓慢，jquery，php
文章推荐： java - java maven 项目中的 stanford NLP API 错误
文章推荐： java - Java Swing 中 HMI 的分层
行者123
个人简介

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

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