谷歌地图点击事件移动标记

Google Maps Click Event to move the marker

本文关键字:移动 事件 谷歌地图      更新时间:2023-09-26

我使用谷歌地图从用户那里获取坐标,拖动标记可以很好地工作,但我需要用点击事件来更改它。我在上尝试了"点击"而不是"拖动"

google.maps.event.addListener(marker, 'dragend', function(a) 

不起作用的

我的代码是

    var latlng = new google.maps.LatLng(<?php echo $villa['loc']; ?>);
    var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'move and pin exact point of your property',
    draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function(a) {
    var result = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
    $('#loc').val(result);
    });

我从DB收到第一个标记位置。用户可以通过移动标记来改变位置,我会得到更新的结果,并将其写入数据库。拖动有效,但"单击"无效。感谢您的帮助。

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

找到解决方案

        <script>
    $(document).ready(function() {
    var latlng = new google.maps.LatLng(<?php echo $villa['loc']; ?>);
    var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'move and pin exact point of your property',
    draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function(a) {
    var sonuc1 = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
    $('#loc').val(sonuc1);
    });
                function placeMarker(location) {
                if ( marker ) {
                marker.setPosition(location);
                } else {
                marker = new google.maps.Marker({
                position: location,
                map: map,
                title: 'move and pin exact point of your property'
                });
                }
                }
                google.maps.event.addListener(map, 'click', function(event) {
                placeMarker(event.latLng);
                var sonuc2 = event.latLng.lat().toFixed(4) + ', ' + event.latLng.lng().toFixed(4);
                $('#loc').val(sonuc2);
                });
    });

    $("#il").change(function() {
    var val = $('#il option:selected').val();
    var sonuc3 = (val);
    $('#sonucx').html(sonuc3);
    var mappos = document.getElementById("il").options[document.getElementById("il").selectedIndex].getAttribute('latLng');
    var latlngStr = mappos.split(',', 2);
    var lat = parseFloat(latlngStr[0]);
    var lng = parseFloat(latlngStr[1]);
    var latlng = new google.maps.LatLng(lat, lng);
    var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'pin exact point of your property',
    draggable: true
    });
    var sonuc4 = lat + "," + lng;
    $('#loc').val(sonuc4);
    google.maps.event.addListener(marker, 'dragend', function(a) {
    var sonuc6 = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
    $('#loc').val(sonuc6);
    });
                function placeMarker(location) {
                if ( marker ) {
                marker.setPosition(location);
                } else {
                marker = new google.maps.Marker({
                position: location,
                map: map,
                title: 'move and pin exact point of your property'
                });
                }
                }
                google.maps.event.addListener(map, 'click', function(event) {
                placeMarker(event.latLng);
                var sonuc5 = event.latLng.lat().toFixed(4) + ', ' + event.latLng.lng().toFixed(4);
                $('#loc').val(sonuc5);
                });

    });
    </script>