如何在谷歌地图上只显示 1 个标记？答案

【问题标题】：How to show only 1 marker on Google Maps?如何在谷歌地图上只显示 1 个标记？
【发布时间】：2011-09-08 03:44:02
【问题描述】：

您好，我在使用 Google Maps V3 API 时遇到了这个奇怪的问题。在谷歌地图上显示多个标记很好，但是当我只想在地图上显示一个标记时，我没有显示任何标记？

下面的代码只显示了没有标记的地图。

var map = new google.maps.Map(document.getElementById('map_canvas'), options);  

marker1 = new google.maps.Marker({  
    position: new google.maps.LatLng(1.288693,103.846733),
    map: map
});

添加第二个标记会在地图上显示 2 个标记。

var map = new google.maps.Map(document.getElementById('map_canvas'), options);

marker1 = new google.maps.Marker({  
    position: new google.maps.LatLng(1.288693,103.846733),
    map: map
}); 

marker2 = new google.maps.Marker({  
    position: new google.maps.LatLng(1.288693,103.846733),
    map: map
});

所以我的问题是，我如何在地图上只显示一个标记？目前我的解决方法是使用 2 个相同 lat/lng 的标记，但它不是很优雅，哈哈

【问题讨论】：

看起来正确。尝试用“var”声明你的标记。我猜你是在另一个函数中覆盖 marker1。
对我来说很好：jsfiddle.net/doktormolle/wKMwR
我正在覆盖它。谢谢！

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

【解决方案1】：

您的第一个代码块完全适合我。这是我工作的整个文件，如果有帮助的话：

<html>
<head>
<title>Map Test</title>
<script type="application/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script>
    var latlng = new google.maps.LatLng(1.288693,103.846733);

    var options = {  
        zoom: 16,  
        center: latlng,  
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
</script>
</head>
<body>
<h1>Map</h1>
<div id="map_canvas" style="height:100%; width:100%;"></div>
<script>
var map = new google.maps.Map(document.getElementById('map_canvas'), options);

marker1 = new google.maps.Marker({  
    position: new google.maps.LatLng(1.288693,103.846733),
    map: map
}); 
</script>
</body>
</html>

【讨论】：

【解决方案2】：

为了在 v3 谷歌地图上显示一个标记，我这样做是这样的

function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP // map view, can be set to satellite, street, roadview, aerialview
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                animation: google.maps.Animation.DROP,
                title: "Uluru (Ayers Rock)"
            });

            marker.setMap(map);  
        }

【讨论】：