Question

我创建了以下代码，但是我试图让用户可以添加标记，我尝试将addListener与click事件一起使用。当我试图点击地图时没有任何反应，我做错了什么？

<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(
    'http://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>

Answer 1

叠加层阻止默认地图。将侦听器添加到叠加层。

  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(
     'http://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>

Answer 2

GroundOverlay正在捕获点击事件。

您有两种选择：

将clickable选项设置为false

historicalOverlay = new google.maps.GroundOverlay(
  'http://i.stack.imgur.com/0mgx2.jpg',imageBounds,{clickable: false});
historicalOverlay.setMap(mapCanvas);

fiddle

向叠加层添加侦听器

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

fiddle

Answer 3

您的地图变量名称是mapCanvas而不是地图

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>

addListener单击未显示添加标记

3 个答案: