在按钮单击上将标记添加到地图并将标记限制为一个

Question

我在地图上有一个添加标记按钮。当我点击它并将鼠标放在地图上时我必须在下面做

1）我的鼠标图标应从手形符号更改为+

2）鼠标移动时显示方向和lat-long。这样的事情

3）当我点击任何地方时，我应该能够在那个地方添加一个标记。

4）我应该只能在按钮点击时添加一个标记

5）添加标记后，我必须在搜索文本框中显示该标记的lat-long值

这是我的代码：

function myMap() {
  var myCenter = new google.maps.LatLng(56.1304, -106.3468);
  var mapProp = {
    center: myCenter,
    zoom: 6,
    scrollwheel: true,
    draggable: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), mapProp);
  
   google.maps.event.addListener(map, 'click', function (event)     {
        placeMarker(event.latLng);
    });

    function placeMarker(location) {
        var marker = new google.maps.Marker({
            position: location,
            animation: google.maps.Animation.DROP,
            map: map
        });
    }
}

<div id="map" style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; "></div>
<div>
    <input id="searchtext" type="text" value=" " class="search-text" placeholder="Enter your search location here" style="z-index: 0; position: absolute; left: 125px; top: 0px;">
</div>


<div class="tool" id="addmarker" data-color='blue' style="z-index: 0; position: absolute; left: 0px; top: 289px;">
    <img id="addmarkerbutton" class="map-tool-icon" title="Add Marker" src="~/Images/search.png" alt="Add Marker">
</div>

Answer 1

您可以检查是否已添加带有全局变量的标记

并添加监听器来管理mousemove ..

var markerAdded =  0;

var text = document.getElementById('searchtext');

function myMap() {
  var myCenter = new google.maps.LatLng(56.1304, -106.3468);
  var mapProp = {
    center: myCenter,
    zoom: 6,
    scrollwheel: true,
    draggable: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), mapProp);

   google.maps.event.addListener(map, 'click', function (event)     {
      if (markerAdded == 0 ){
        placeMarker(event.latLng);
        markerAdded = 1;
      }
    });

  google.maps.event.addListener(map, 'mousemove', function (event) {    
         text.value = location.lat() + ' ' + location.lng(); 
  }

    function placeMarker(location) {
        var marker = new google.maps.Marker({
            position: location,
            animation: google.maps.Animation.DROP,
            map: map
        });

     text.value = location.lat() + ' ' + location.lng(); 
    }
}