单击按钮将标记添加到Google地图

Question

I have following code where I am using a Google map with overlay images. 我在使用带有重叠图像的Google地图时使用以下代码。 I have hard-coded one marker on this map. 我在这张地图上硬编码了一个标记。 In my page, I need to add markers on 'Add Marker' button click getting Latitude and Longitude inputs. 在我的页面中，我需要在“添加标记”按钮上单击以添加标记，以获取纬度和经度输入。 How can I push markers on to the map on this button click. 单击此按钮后，如何将标记推到地图上。

<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>

Answer 1

One option is to use the google.maps.event.addDomListener function: 一种选择是使用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 概念证明

code snippet: 代码段：

 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>

单击按钮将标记添加到Google地图

问题描述

1 个解决方案

解决方案1
2 2017-08-22 10:16:33

单击按钮将标记添加到Google地图

问题描述

1 个解决方案

解决方案1 2 2017-08-22 10:16:33

解决方案1
2 2017-08-22 10:16:33