单击按钮时移动谷歌地图标记

Move google maps marker when button is clicked

本文关键字：地图 图标 谷歌 移动 按钮 单击      更新时间：2023-09-26

我花了很多时间来解决这个问题，但不知道如何工作，所以这里是我的基础：

<script>
 function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng("43.2697,26.9165"),
          zoom: 8  };
        var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
        var marker=new google.maps.LatLng("43.2697,26.9165");
        var main=new google.maps.Marker({position:marker});
        main.setMap(map); 
      }  

        function moveMarker(lat,lng) {
           var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng)); 
        //???????
            }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

现在，在HTML中，我有一个按钮和两个文本字段。当点击按钮时，它会启动moveMarker功能并传递字段中输入的新纬度和经度。目标是标记必须移动到新的位置，并且地图必须相应地居中。我尝试了很多提示，但无法访问标记对象（在我的情况下名称为Main）以将其移动到新位置。

您的标记（"main"）是初始化文件的本地标记。要从HTML点击事件访问它，它需要在全局范围内。

<script>
var main = null;
function initialize() {
    var mapOptions = {
          center: new google.maps.LatLng("43.2697,26.9165"),
          zoom: 8  };
    var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
    var marker=new google.maps.LatLng("43.2697,26.9165");
    main=new google.maps.Marker({position:marker});
    main.setMap(map); 
}  

function moveMarker(lat,lng) {
  var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng)); 
  main.setPosition(latlng);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
相关文章：