当我点击任何地方时，如何在谷歌地图中移动标记

Question

如何制作：如果我点击谷歌地图中的某个地方，标记就会出现在它上面，如果我点击其他地方，标记会改变/移动到新的地方。

我认为，会创建事件onClick，但我很困惑如何开始。

这里是我的代码：

此代码只是谷歌地图的基础，地图已经出现。

<script>
function loadmap()
{
var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccessjalan(position) 
{

var element = document.getElementById('peta');
var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);


 var myMapOptions = {
   zoom: 12
   ,center: myLatlng
   ,mapTypeId: google.maps.MapTypeId.HYBRID
 };
 var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
 var image = "images/loctag.png";





 var myOptions = {
  content: ""
 ,disableAutoPan: false
 ,maxWidth: 0
 ,pixelOffset: new google.maps.Size(-140, -110)
 ,pixelOffset: new google.maps.Size(140, 110)
 ,zIndex: null
 ,boxStyle: { 
  background: "url('tipbox.gif') no-repeat"
  ,opacity: 0.90
 }
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
 };




}
</script>

我需要像下面的屏幕截图

输出

Answer 1

您需要维护对添加到地图的最后一个标记（要删除的上一个标记）的全局引用。然后处理点击监听器中的逻辑。

我添加了此Fiddle以显示其工作原理

/*
 * declare map as a global variable
 */
var map;
var previousMarker;
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

    map.addListener('click', function(e) {
        if (previousMarker)
        previousMarker.setMap(null);
        placeMarker(e.latLng, map);
    });
    return marker;


  /*
   * add markers to map
   */
  var marker0 = createMarker({
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png"
  }, "<h1>Marker 0</h1><p>This is the home marker.</p>");
});



function placeMarker(position, map) {
    previousMarker = new google.maps.Marker({
        position: position,
        map: map
    });
    map.setPosition(position);
}