尝试使用谷歌地图api，需要更新一个文本字段与鼠标点击坐标

Trying to use google maps api, need to update a text field with mouseclick coordinates

本文关键字：文本 一个 字段 坐标 鼠标 谷歌地图 api 更新      更新时间：2023-09-26

在我的网页上，我试图做的标题说，但我已经尝试了许多不同的例子，我在网上找到。我正在使用来自hpneo/github的gmaps，这似乎不想工作。如能提供任何信息，我将不胜感激。

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

你的"map"变量不是一个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);
   }
 });
工作示例

相关文章：