在按钮单击时向谷歌地图添加标记答案

【问题标题】：Adding markers to google map on button click在按钮单击时向谷歌地图添加标记
【发布时间】：2017-08-22 09:58:35
【问题描述】：

我有以下代码，我在其中使用带有叠加图像的 Google 地图。我在这张地图上硬编码了一个标记。在我的页面中，我需要在“添加标记”按钮上添加标记，单击获取纬度和经度输入。如何在单击此按钮时将标记推送到地图上。

<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-map/3.0-rc1/jquery.ui.map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>  
<style>
  #map {
    height: 90%;
  }
  html, body {
    height: 90%;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key= xxx"></script>
<script>
  var overlay;

  MapOverlay.prototype = new google.maps.OverlayView();

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: 9.877717, lng: 79.694586},
      mapTypeId: 'satellite'
    });

    var myLatLng = {lat: 9.8, lng: 79.9};
    //adding a marker
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map
    });

    var bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(9.71088992, 79.6855391),
        new google.maps.LatLng(9.9351849, 80.048088));

    var srcImage = 'file:///home/../abc.jpg';

    overlay = new MapOverlay(bounds, srcImage, map);
  }

  function MapOverlay(bounds, image, map) {

    ........
  }

  MapOverlay.prototype.onAdd = function() {

    .............
  };


  google.maps.event.addDomListener(window, 'load', initMap);
</script>
 </head>
 <body>
Latitude : <input type="text" placeholder="Latitude" id="lat"/>
Longitude : <input type="text" placeholder="Longitude" id="lng"/>
<button type="button" id="addMarkerBtnId">Add Marker</button>
<br/><br/>
<div id="map"></div>

【问题讨论】：

标签： javascript google-maps google-maps-markers

【解决方案1】：

一种选择是使用google.maps.event.addDomListener 函数：

google.maps.event.addDomListener(document.getElementById('addMarkerBtnId'), 'click', function(evt) {
   var marker = new google.maps.Marker({
     position: {
     lat: parseFloat(document.getElementById('lat').value),
     lng: parseFloat(document.getElementById('lng').value)},
     map: map
   });
});

proof of concept fiddle

代码 sn-p：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: 9.877717,
      lng: 79.694586
    },
    mapTypeId: 'satellite'
  });

  var myLatLng = {
    lat: 9.8,
    lng: 79.9
  };
  //adding a marker
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map
  });
  google.maps.event.addDomListener(document.getElementById('addMarkerBtnId'), 'click', function(evt) {
    var marker = new google.maps.Marker({
      position: {
        lat: parseFloat(document.getElementById('lat').value),
        lng: parseFloat(document.getElementById('lng').value)
      },
      map: map
    });
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
Latitude :
<input type="text" placeholder="Latitude" id="lat" value="9.877" /> Longitude :
<input type="text" placeholder="Longitude" id="lng" value="79.694" />
<button type="button" id="addMarkerBtnId">Add Marker</button>
<br/>
<br/>
<div id="map"></div>

【讨论】：