3

Googleマップの外にアイコンを配置できるようにしたいと思います。次に、このアイコンをGoogleマップにドラッグアンドドロップして、Googleマップマーカーとして使用したいと思います。それは可能ですか？

ありがとうございました

4

2 に答える 2

1

受け入れられた回答には、難読化されたコードが含まれています。もう少し具体的なものを見つけるのにかなりの時間がかかったので、この答えがグーグル検索で最初に出てきたので、良いスタートのために何かを共有すると思いました.

注：window.mapマップへの参照を保存する場所です。また、クロスブラウザーの互換性のために、jquery-ui ドラッグ可能を使用しています (私のプロジェクトには既に含まれていたので、再利用しないでください)。

    var pixelToLatlng = function(xcoor, ycoor)
    {
        var ne = window.map.getBounds().getNorthEast();
        var sw = window.map.getBounds().getSouthWest();
        var projection = window.map.getProjection();
        var topRight = projection.fromLatLngToPoint(ne);
        var bottomLeft = projection.fromLatLngToPoint(sw);
        var scale = 1 << window.map.getZoom();

        var newLatlng = projection.fromPointToLatLng(new google.maps.Point(xcoor / scale + bottomLeft.x, ycoor / scale + topRight.y));
        return newLatlng;
    };

    $(".draggable").draggable(
    {
        helper: "clone",
        appendTo: window.map.getDiv(),
        cursorAt: { left: 5, top: 5 },
        stop: function(event, ui)
        {
            var wrapper = $(window.map.getDiv());
            var map_div_pos = wrapper.offset();
            var map_div_border_left = parseInt(wrapper.css("border-left-width"),10);
            var map_div_border_top = parseInt(wrapper.css("border-top-width"),10);

            var mouse_pos = ui.helper.offset();
            lat_lng = pixelToLatlng(mouse_pos.left - map_div_border_left - map_div_pos.left, mouse_pos.top - map_div_border_top - map_div_pos.top);

            window.add_group_marker = new google.maps.Marker(
            {
                position: lat_lng,
                map: window.map,
                zIndex: Math.round(lat_lng.lat()*-100000)<<5
            });
        }
    });

クレジット:

于 2015-09-03T16:48:17.943 に答える