谷歌地图上的文本框值更改更新标记答案

【问题标题】：text box value change update marker on Google map谷歌地图上的文本框值更改更新标记
【发布时间】：2012-07-05 10:05:49
【问题描述】：

我有使用谷歌地图 API v3 的谷歌地图。我所拥有的是手风琴中的谷歌地图，用户可以点击并放置一个标记和纬度和经度值填充顶部的两个文本框。

这部分在下面的脚本中运行良好。但是如果用户更改文本框标记中的 lat 或 lon 值需要相应地更改，我现在想要的文本框填充了 lat 和 lon。

var map = null;
function initialize() {
var myLatlng = new google.maps.LatLng(25.263327,55.329895);
    var myOptions = {
        zoom: 10,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker;

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

google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
    document.getElementById("latFld").value = event.latLng.lat();
    document.getElementById("lngFld").value = event.latLng.lng();
});


  }

$(document).ready(function() {

$("#accordion").bind('accordionchange', function(event, ui) {
    if (ui.newContent.attr('id') == 'tabThree' && !map)
    {
        map = initialize();
    }
    });
    });

【问题讨论】：

标签： javascript google-maps google-maps-api-3 accordion

【解决方案1】：

这样的事情可能会奏效：

function updatePosition(){
    var lat = parseFloat(document.getElementById("latFld").value);
    var lon = parseFloat(document.getElementById("lngFld").value);
    if (lat && lon) {
        var newPosition = new google.maps.LatLng(lat,lon);
        placeMarker(newPosition);
    }
}

...在您的 HTML 中

<input id ='latFld' onkeyup='updatePosition()'>
<input id ='latFld' onkeyup='updatePosition()'>

您可能想使用 onchange 而不是 onkeyup 来减少它的过度活跃。 :-)

【讨论】：

我尝试添加您的函数，但是当我将 updatePosition() 放在 main initialize() 中时，它会给出错误“未定义 updatePosition”。如果我放置在 initialize() 之外，它会给我一个错误“placeMarker 未定义”。