javascript - 更改谷歌地图标记位置onclick

Question

我想移动标记并在单击 map 时获取经度和纬度。 目前，我的 map 已显示，但我无法更改标记位置。 我尝试模仿 this 中的编码器.

我的引用使用按钮来更改标记的位置。在我的情况下，我需要点击 map 。我尝试修改它以适应我的情况，但仍然不起作用。

这是我的代码:

jQuery(document).ready(function( $ ) {

        function myMap(lat,long) {
            var myCenter = new google.maps.LatLng(lat,long);
            var mapCanvas = document.getElementById("googleMap");

            var mapOptions = {
                center: myCenter, 
                zoom: 15,
                treetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(mapCanvas, mapOptions);
            var marker = new google.maps.Marker({position:myCenter});
            marker.setMap(map);

            // Zoom to 9 when clicking on marker
            google.maps.event.addListener(marker,'click',function() {
            map.setZoom(9);
            map.setCenter(marker.getPosition());
            });

            //sets variable for lat and long
            $('.lat').text(lat);
            $('.long').text(long);
        }

        function newLocation(newLat,newLng)
        {
            map.setCenter({
                lat : newLat,
                lng : newLng
            });
        }

        google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));


        $(document).ready(function ()
        {
            google.maps.event.addListener(map, 'click', function(event) {
                newLocation(event.myCenter);
            });
        });

    });

Answer 1

1) 单击 map 并将标记的位置更改为您单击的位置

var map, marker;
$(document).ready(function() {

    function myMap(lat,long) {
        var myCenter = new google.maps.LatLng(lat,long);
        var mapCanvas = document.getElementById("googleMap");

        var mapOptions = {
            center: myCenter, 
            zoom: 15,
            treetViewControl: false,
            mapTypeControl: false
        };

        map = new google.maps.Map(mapCanvas, mapOptions);
        marker = new google.maps.Marker(
            {
                position:myCenter,
                draggable: true
            }
        );
        marker.setMap(map);

        // Zoom to 9 when clicking on marker
        google.maps.event.addListener(marker,'click',function() {
            map.setZoom(9);
            map.setCenter(marker.getPosition());
        });

        //sets variable for lat and long
        $('.lat').text(lat);
        $('.long').text(long);
    }

    function newLocation(newLat,newLng)
    {
        map.setCenter({
            lat : newLat,
            lng : newLng
        });
    }

    google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));


    $(document).ready(function ()
    {
        // click on map and set you marker to that position
        google.maps.event.addListener(map, 'click', function(event) {
            marker.setPosition(event.latLng);
        });
    });

});

2) 通过拖放更改标记的位置

var map;
$(document).ready(function() {

    function myMap(lat,long) {
        var myCenter = new google.maps.LatLng(lat,long);
        var mapCanvas = document.getElementById("googleMap");

        var mapOptions = {
            center: myCenter, 
            zoom: 15,
            treetViewControl: false,
            mapTypeControl: false
        };

        map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker(
            {
                position:myCenter,
                draggable: true // set marker draggable
            }
        );
        marker.setMap(map);

        // Zoom to 9 when clicking on marker
        google.maps.event.addListener(marker,'click',function() {
            map.setZoom(9);
            map.setCenter(marker.getPosition());
        });

        // when dragend, show new lat and lng in console
        google.maps.event.addListener(marker, 'dragend', function(){
            console.log("lat: "+marker.position.lat())
            console.log("lng: "+marker.position.lng())
        })

        //sets variable for lat and long
        $('.lat').text(lat);
        $('.long').text(long);
    }

    function newLocation(newLat,newLng)
    {
        map.setCenter({
            lat : newLat,
            lng : newLng
        });
    }

    google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));


    $(document).ready(function ()
    {
        google.maps.event.addListener(map, 'click', function(event) {
            newLocation(event.myCenter);
        });
    });

});