javascript - 尝试使用 google maps api，需要使用鼠标点击坐标更新文本字段

Question

在我的网页上，我正在尝试按照标题所述进行操作，但是我尝试了许多在网上找到的不同示例。我正在使用来自 hpneo/github 的 gmap，这似乎不想工作。任何信息都会非常感谢。

<script>
$(document).ready(function(){

 var map = new GMaps({
    div: '#gmap',
   lat: 56.744901,
   lng: -111.473049,
    zoom: 16,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : false,
  });

If I delete this block for the addlistener, my map loads just fine, if it's hear my map doesn't show at all

 google.maps.event.addListener(map, 'click', function() {
  var lati = event.latLng.lat();
  var longi = event.latLng.lng();
  map.addMarker({
    lat: lati,
    lng: longi,
    title: 'Test'
  });
  $('#inputLatitude').val(lati);
  $('#inputLongitude').val(longi);
 }




GMaps.geolocate({
  success: function(position) {
    map.setCenter(position.coords.latitude, position.coords.longitude);
  },
  error: function(error) {
    alert('Geolocation failed: '+error.message);
  },
  not_supported: function() {
    alert("Your browser does not support geolocation");
  }
});

$(window).resize(function () {
   var h = $(window).height(),
   offsetTop = 150; // Calculate the top offset

   $('#gmap').css('height', (h - offsetTop));
   }).resize();
});

</script>

Answer 1

您的“地图”变量不是 google.maps.Map 对象。试试这个（取自示例）：

var map = new GMaps({
   div: '#gmap',
  lat: 56.744901,
  lng: -111.473049,
   zoom: 16,
   zoomControl : true,
   zoomControlOpt: {
       style : 'SMALL',
       position: 'TOP_LEFT'
   },
   panControl : false,
   click: function(event) {
    var lati = event.latLng.lat();
    var longi = event.latLng.lng();
    map.addMarker({
      lat: lati,
      lng: longi,
      title: 'Test'
    });
    $('#inputLatitude').val(lati);
    $('#inputLongitude').val(longi);
   }
 });

工作示例