每次在地图上更改标记位置时更改隐藏的字段值

时间:2011-04-26 04:34:52

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

我正在制作一个谷歌地图应用程序,我允许用户通过点击地图在地图上只放置一个标记。每次用户再次单击地图时,旧标记将被删除,标记将放置在新的单击位置。我有一个隐藏的输入字段,我希望每次标记改变位置时它的值都会改变。该值应该是新标记位置的坐标。我为此编写的代码如下,

var map;
var marker;
var coords;

function initialize() {
    var latlng = new google.maps.LatLng(19.074448,72.872314);
    var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
        });
};

function placeMarker(location) {
    if (marker) {
        marker.setMap(null);
        marker = null;
        placeMarker(location);
    }
    else {
        marker = new google.maps.Marker({
            position: location,
            map: map
            });
        document.getElementById("id_lat").value = marker.getPosition().toUrlValue()
    }
};

具体来说,我正在使用此行来更改值

document.getElementById("id_lat").value = marker.getPosition().toUrlValue()

其中相关隐藏字段的ID为“id_lat” 这似乎不起作用。我做错了什么,我该如何解决?我是javascript的新手。

1 个答案:

答案 0 :(得分:0)

我想你忘了在initialize()函数中添加一个标记。除此之外你的代码似乎工作正常。

var map;
var marker;
var coords;

function initialize() {
    var latlng = new google.maps.LatLng(19.074448,72.872314);
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });
    // add a marker on map
    placeMarker(latlng);
};

function placeMarker(location) {
    if (marker) {
        marker.setMap(null);
        marker = null;
        placeMarker(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
        document.getElementById("id_lat").value = marker.getPosition().toUrlValue();
            // worked for me for <input type="text" value="Submit" id="id_lat" style="display:none"/> element
        alert(document.getElementById("id_lat").value);
    }
};