javascript - 在谷歌地图中放置标记-6ren

javascript - 在谷歌地图中放置标记

转载作者：行者123 更新时间：2023-11-30 18:03:41

25

4

所以我正在准备一个包含 Google map 的页面，其中有两种形式，即纬度和经度，以及一个提交按钮。

输入经度和纬度后， map 会以所需位置为中心并在此处放置一个标记。

我面临的问题是，每当我放置一个新的 lat/long 时，旧标记就不会消失。所以基本上如果输入第一个纬度/经度:10/12，它会以那个为中心并在那里放置一个标记，但是当我输入第二个纬度/经度(比如):11/12 时，它也会以那个为中心并放置一个标记也在那里，而第一个未被删除。

我希望页面是每当在表单中输入新内容时，只有在表单中反射(reflect)的内容没有旧标记。

这是我的代码:

<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script>
    var map;
    function initialize() {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(11.6667,76.2667),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    function pan() {
        var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
        map.setCenter(panPoint)
        var marker = new google.maps.Marker({
                map: map,
                position: panPoint,
            });

     }
</script>
</head>
<body>
 Latitude:<input type="text" id="lat" >
 Longitude:<input type="text" id="lng">
 <input type="button" value="updateCenter" onclick="pan()" />


 <div id="map-canvas"></div>
 </body>
</html>

一些帮助会很有用

最佳答案

为此，您每次都需要清除标记。要清理标记，请将标记保留为全局变量，例如。

function pan() {
    try{
        marker.setMap(null);//clear marker
     }
     catch(err){
     }

    var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
    map.setCenter(panPoint)
    //declare marker as global variable
    marker = new google.maps.Marker({
            map: map,
            position: panPoint,
        });

 }

这应该可以解决问题。

关于javascript - 在谷歌地图中放置标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16298491/

25

4

0

文章推荐： JavaScript 代码仅适用于 IE

文章推荐： c# - Entity Framework - 自动变更检测的优势是什么？

文章推荐： c# - 反序列化时的 BinaryFormatter 和 CryptoStream 问题

文章推荐： c# - 让 .net 应用程序和 vb6 应用程序互相交谈？

地图：leaflet基本使用
leaflet：一个开源并且对移动端友好的交互式地图 JavaScript 库中文文档： https://leafletjs.cn/reference.html 官网（英文）： ht

首页

博学

6Ren·AI

商城

javascript - 在谷歌地图中放置标记