2

私は、クリックして緯度/経度要素を定義する必要がある私のこのプロジェクトに取り組んでおり、最終的にその方法を見つけましたが、既に定義済みの要素が、以下のソースによって定義されている新しいオーバーレイ要素と干渉することを発見しました。だから私は見て、見て、検索して、グーグルで検索しましたが、それに関する有用な情報を見つけることができませんでした:グーグルマップのオーバーレイをクリックできないようにする方法はありますか?

カスタム関数を使用して、クリック イベントの緯度と経度を取得し、定義済みの円オーバーレイ オブジェクトを配置しています。ただし、既に定義済みのオーバーレイ要素がある場合、それらの上をクリックして新しいオーバーレイ要素を設定することはできません。つまり、新しい要素のクリックイベントに干渉しないように、それらを対話不可またはクリック不可にするか、別のレイヤーに設定する必要があります。

私が使用しているJSは次のとおりです。

<script type="text/javascript">
    var map;
    var markersArray = []; //the array for the newly defined objects

    function initMap()
    {
        var latlng = new google.maps.LatLng(41, 29);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        // add a click event handler to the map object
        google.maps.event.addListener(map, "click", function(event)
        {
            // place a marker
            placeMarker(event.latLng);

        });

            // I've predefined a couple of markers just to see how it works with already defined elements and discovered this interference that I mentioned above   
        var mar1 = new google.maps.LatLng(40.9653, 29.3705);
        var marker1 = new google.maps.Circle({
        center: mar1,
        radius: 2500,
        fillColor: "#FF0000",
        strokeWeight: 0,
        fillOpacity: 0.35,
        map: map
        });
        var mar2 = new google.maps.LatLng(40.9664, 29.3252);
        var marker2 = new google.maps.Circle({
        center: mar2,
        radius: 2500,
        fillColor: "#FF0000",
        strokeWeight: 0,
        fillOpacity: 0.35,
        map: map
        });
    marker1.setMap(map);
    marker2.setMap(map);

    }

    function placeMarker(location) {
        // first remove all new markers if there are any, so that we define one new at a time
        deleteOverlays();

        var new_marker = new google.maps.Circle({
            center: location,
            radius: 2500,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 0,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            //position: location, 
            map: map
        });

        // add marker in markers array
        markersArray.push(new_marker);

    }

    // Deletes all markers in the array by removing references to them
    function deleteOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
        markersArray.length = 0;
        }
    }

</script>

フィドル

4

1 に答える 1

8

CircleOptions に {clickable: false} を設定します。

    var new_marker = new google.maps.Circle({
        center: location,
        radius: 2500,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 0,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        clickable: false,     // <=====================
        map: map
    });

Modified jsfiddle

于 2012-12-25T21:00:47.530 に答える