addListener单击不显示添加标记

addListener click is not showing add marker

本文关键字：添加 加标记 显示 单击 addListener      更新时间：2023-09-26

我已经创建了下面的代码，但我试图让用户添加标记，我试图使用带有点击事件的addListener。当我试图点击地图时，什么也没发生，我做错了什么？

<head>
<style>
html, body {
  height:100%;
  width: 100%;
  margin-left: 0px;
  margin-right:  0px;
  margin-bottom:  0px;
  margin-top:  0px;
}
#mapContainer {
  height: 100%;
  width: 100%;
  display: block;
  margin-left: 0px;
  margin-right:  0px;
  margin-bottom:  0px;
  margin-top:  0px;
}
#map {
  height: 100%;
}
.gm-style-mtc {
  display: none;
}
.gmnoprint {
  display: none;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
  <div id="mapContainer">
    <div id="map"></div>
  </div>

  <script>
  var mapCanvas;
  function initialize() {
    var myOptions = {
      center: {lat: 40.740, lng: -74.18},
      zoom : 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    mapCanvas = new google.maps.Map(document.getElementById("mapContainer"), myOptions);
    var marker = new google.maps.Marker({
     position: mapCanvas.getCenter(),
     map: mapCanvas
    });
    var imageBounds = {
      north: 40.773941,
      south: 40.712216,
      east: -74.12544,
      west: -74.22655
    };
    historicalOverlay = new google.maps.GroundOverlay(
    'https://i.stack.imgur.com/0mgx2.jpg',
    imageBounds);
    historicalOverlay.setMap(mapCanvas);

    // This event listener calls addMarker() when the map is clicked.
      google.maps.event.addListener(mapCanvas, 'click', function(e) {
        placeMarker(e.latLng, mapCanvas);
      });

    //Changes zoom levels when the projection is available.
    google.maps.event.addListenerOnce(mapCanvas, "projection_changed", function(){
      mapCanvas.setMapTypeId(google.maps.MapTypeId.HYBRID);  //Changes the MapTypeId in short time.
      setZoomLimit(mapCanvas, google.maps.MapTypeId.ROADMAP);
      setZoomLimit(mapCanvas, google.maps.MapTypeId.HYBRID);
      setZoomLimit(mapCanvas, google.maps.MapTypeId.SATELLITE);
      setZoomLimit(mapCanvas, google.maps.MapTypeId.TERRAIN);
      mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);  //Sets the MapTypeId to original.
    });
  }
  function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: mapCanvas
    });
    map.setCenter(location);
  }
  function setZoomLimit(map, mapTypeId){
    //Gets MapTypeRegistry
    var mapTypeRegistry = mapCanvas.mapTypes;
    //Gets the specified MapType
    var mapType = mapTypeRegistry.get(mapTypeId);
    //Sets limits to MapType
    mapType.maxZoom = 15;  //It doesn't work with SATELLITE and HYBRID maptypes.
    mapType.minZoom = 15;
  }
  google.maps.event.addDomListener(window, "load", initialize);
    </script>
    <body>

GroundOverlay正在捕捉点击事件。

你有两个选择：

  1. 将clickable选项设置为false
historicalOverlay = new google.maps.GroundOverlay(
  'https://i.stack.imgur.com/0mgx2.jpg',imageBounds,{clickable: false});
historicalOverlay.setMap(mapCanvas);

小提琴

  1. 将侦听器添加到覆盖
google.maps.event.addListener(historicalOverlay, 'click', function(e) {
  placeMarker(e.latLng, mapCanvas);
});

小提琴

覆盖正在阻止默认贴图。将侦听器添加到覆盖中。

  google.maps.event.addListener(historicalOverlay, 'click', function(e) {
    placeMarker(e.latLng, mapCanvas);
  });

尝试在下面显示演示：

 var mapCanvas;
 function initialize() {
   var myOptions = {
     center: {
       lat: 40.740,
       lng: -74.18
     },
     zoom: 15,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   mapCanvas = new google.maps.Map(document.getElementById("mapContainer"), myOptions);
   var marker = new google.maps.Marker({
     position: mapCanvas.getCenter(),
     map: mapCanvas
   });
   var imageBounds = {
     north: 40.773941,
     south: 40.712216,
     east: -74.12544,
     west: -74.22655
   };
   historicalOverlay = new google.maps.GroundOverlay(
     'https://i.stack.imgur.com/0mgx2.jpg',
     imageBounds);
   historicalOverlay.setMap(mapCanvas);
   // This event listener calls addMarker() when the map is clicked.
   google.maps.event.addListener(historicalOverlay, 'click', function(e) {
     console.log("clicked'");
     placeMarker(e.latLng, mapCanvas);
   });
   //Changes zoom levels when the projection is available.
   google.maps.event.addListenerOnce(mapCanvas, "projection_changed", function() {
     mapCanvas.setMapTypeId(google.maps.MapTypeId.HYBRID); //Changes the MapTypeId in short time.
     setZoomLimit(mapCanvas, google.maps.MapTypeId.ROADMAP);
     setZoomLimit(mapCanvas, google.maps.MapTypeId.HYBRID);
     setZoomLimit(mapCanvas, google.maps.MapTypeId.SATELLITE);
     setZoomLimit(mapCanvas, google.maps.MapTypeId.TERRAIN);
     mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP); //Sets the MapTypeId to original.
   });
 }
 function placeMarker(location) {
   console.log("place a marker");
   var marker = new google.maps.Marker({
     position: location,
     map: mapCanvas
   });
   map.setCenter(location);
 }
 function setZoomLimit(map, mapTypeId) {
   //Gets MapTypeRegistry
   var mapTypeRegistry = mapCanvas.mapTypes;
   //Gets the specified MapType
   var mapType = mapTypeRegistry.get(mapTypeId);
   //Sets limits to MapType
   mapType.maxZoom = 15; //It doesn't work with SATELLITE and HYBRID maptypes.
   mapType.minZoom = 15;
 }
 google.maps.event.addDomListener(window, "load", initialize);
html,
body {
  height: 100%;
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
}
#mapContainer {
  height: 100%;
  width: 100%;
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
}
#map {
  height: 100%;
}
.gm-style-mtc {
  display: none;
}
.gmnoprint {
  display: none;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <div id="mapContainer">
    <div id="map"></div>
  </div>
</body>
</html>

并且您的映射变量名称是mapCanvas而不是map

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: mapCanvas
    });
    **mapCanvas**.setCenter(location);
}

您可以获得免费的api密钥。像这样：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=**AIza14746817467416y01Dipl7TZVXfDmUCyY**&sensor=true&language=tr"></script>
相关文章：