获取已存在位置(已标记)位置的标记(onclick)的经度和纬度

时间:2015-10-15 03:54:33

标签: google-maps google-maps-api-3

我使用google map api在点击事件上得到lat很长。我可以在点击时获得lat很长但是当我试图点击已经存在或已经在该地方标记的地方时它不允许我点击那个地方或文本附近的文字或图标。附加图像。enter image description here

这是获取lat long的代码

google.maps.event.addListener(map, "click", function (e) {
    removeMarkers(null);
    var latLng = e.latLng;
    var lat1 = e.latLng.lat();
    var lng1 = e.latLng.lng();
    updateLatLongBoxes(lat1, lng1);
    // Place marker on clicked Position
    var marker = new google.maps.Marker({
        position: latLng
    });
    marker.setMap(map);
    //Store the current marker in an array
    markers.push(marker);

    });

1 个答案:

答案 0 :(得分:0)

Google地图触发了自己的POI对象点击处理程序,并且没有正式的方式来注册自定义事件。

这里可能优选的方法是通过样式隐藏POI功能,如下所示



function initMap() {
    var latlng = new google.maps.LatLng(40.713638, -74.005529);
    var myOptions = {
        zoom: 17,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{
            featureType: "poi",
            elementType: "labels",
            stylers: [{
                visibility: "off"
            }]
        }]
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(map, "click", function (event) {
        //console.log(event.latLng.toString());
        placeMarker(map, event.latLng);
    });


}

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

google.maps.event.addDomListener(window, 'load', initMap);

 #map_canvas {
     height: 600px;
     width: 800px;
 }

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
&#13;
&#13;
&#13;

另一种选择是通过覆盖 google.maps.InfoWindow注册自定义点击处理程序,如下所示:

&#13;
&#13;
function initMap() {
    var latlng = new google.maps.LatLng(40.713638, -74.005529);
    var myOptions = {
        zoom: 17,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(map, "click", function (event) {
        //console.log(event.latLng.toString());
        placeMarker(map, event.latLng);
    });



    var fnSetContent = google.maps.InfoWindow.prototype.setContent;
    google.maps.InfoWindow.prototype.setContent = function () {
        google.maps.event.addListenerOnce(this, 'map_changed', function () {
            var map = this.getMap();
            google.maps.event.trigger(map, 'click', { latLng: this.getPosition() });
            this.close(); //force to close Info Window
        });
        fnSetContent.apply(this, arguments);
    };
}

function placeMarker(map, location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
}
google.maps.event.addDomListener(window, 'load', initMap);
&#13;
 #map_canvas {
            height: 600px;
            width: 800px;
        }
&#13;
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
&#13;
&#13;
&#13;