Javascript addListener单击未显示添加标记_Javascript_Html_Google Maps

Javascript addListener单击未显示添加标记

javascript html google-maps

Javascript addListener单击未显示添加标记,javascript,html,google-maps,Javascript,Html,Google Maps,我已经创建了下面的代码，但是我试图让用户能够添加一个标记，我尝试使用一个带有点击事件的addListener。当我尝试点击地图时，什么都没有发生，我做错了什么 <head> <style> html, body { height:100%; width: 100%; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; margin-top: 0px; } #mapContainer

我已经创建了下面的代码，但是我试图让用户能够添加一个标记，我尝试使用一个带有点击事件的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(
    '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>


html，正文{
身高：100%；
宽度：100%；
左边距：0px；
右边距：0px；
边缘底部：0px；
边际上限：0px；
}
#地图容器{
身高：100%；
宽度：100%；
显示：块；
左边距：0px；
右边距：0px；
边缘底部：0px；
边际上限：0px；
}
#地图{
身高：100%；
}
.gm型mtc{
显示：无；
}
.gmnoprint{
显示：无；
}
var mapCanvas；
函数初始化（）{
变量myOptions={
中心：{lat:40.740，lng:-74.18}，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
mapCanvas=new google.maps.Map（document.getElementById（“mapContainer”），myOptions）；
var marker=new google.maps.marker({
位置：mapCanvas.getCenter（），
地图：地图画布
});
变量imageBounds={
北：40.773941，
南：40.712216，
东：-74.12544，
西区：-74.22655
};
historicalOverlay=新建google.maps.GroundOverlay(
'http://i.stack.imgur.com/0mgx2.jpg',
图像边界）；
setMap（mapCanvas）；
//单击映射时，此事件侦听器调用addMarker（）。
google.maps.event.addListener（mapCanvas，'click'，函数（e）{
放置标记（如板条、地图画布）；
});
//当投影可用时更改缩放级别。
google.maps.event.addListenerOnce（mapCanvas，“投影已更改”，函数（）{
mapCanvas.setMapTypeId（google.maps.MapTypeId.HYBRID）；//在短时间内更改MapTypeId。
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）；//将MapTypeId设置为原始。
});
}
功能位置标记（位置）{
var marker=new google.maps.marker({
位置:位置,，
地图：地图画布
});
地图设置中心（位置）；
}
函数setZoomLimit（映射，mapTypeId）{
//获取MapTypeRegistry
var mapTypeRegistry=mapCanvas.mapTypes；
//获取指定的映射类型
var mapType=mapTypeRegistry.get（mapTypeId）；
//将限制设置为MapType
mapType.maxZoom=15；//它不适用于卫星贴图类型和混合贴图类型。
mapType.minZoom=15；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

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

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

正在尝试在下面显示演示：

var映射画布；
函数初始化（）{
变量myOptions={
中心：{
拉脱维亚：40.740，
液化天然气：-74.18
},
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
mapCanvas=new google.maps.Map（document.getElementById（“mapContainer”），myOptions）；
var marker=new google.maps.marker({
位置：mapCanvas.getCenter（），
地图：地图画布
});
变量imageBounds={
北：40.773941，
南：40.712216，
东：-74.12544，
西区：-74.22655
};
historicalOverlay=新建google.maps.GroundOverlay(
'http://i.stack.imgur.com/0mgx2.jpg',
图像边界）；
setMap（mapCanvas）；
//单击映射时，此事件侦听器调用addMarker（）。
google.maps.event.addListener（historicalOverlay，'click'，函数（e）{
log（“单击”）；
放置标记（如板条、地图画布）；
});
//当投影可用时更改缩放级别。
google.maps.event.addListenerOnce（mapCanvas，“投影已更改”，函数（）{
mapCanvas.setMapTypeId（google.maps.MapTypeId.HYBRID）；//在短时间内更改MapTypeId。
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）；//将MapTypeId设置为原始。
});
}
功能位置标记（位置）{
控制台日志（“放置标记”）；
var marker=new google.maps.marker({
位置:位置,，
地图：地图画布
});
地图设置中心（位置）；
}
函数setZoomLimit（映射，mapTypeId）{
//获取MapTypeRegistry
var mapTypeRegistry=mapCanvas.mapTypes；
//获取指定的映射类型
var mapType=mapTypeRegistry.get（mapTypeId）；
//将限制设置为MapType
mapType.maxZoom=15；//它不适用于卫星贴图类型和混合贴图类型。
mapType.minZoom=15；
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体{
身高：100%；
宽度：100%；
左边距：0px；
右边距：0px；
边缘底部：0px；
边际上限：0px；
}
#地图容器{
身高：100%；
宽度：100%；
显示：块；
左边距：0px；
右边距：0px；
边缘底部：0px；
边际上限：0px；
}
#地图{
身高：100%；
}
.gm型mtc{
显示：无；
}
.gmnoprint{
显示：无；
}

JS-Bin
正在捕获单击事件
您有两个选择：
将可点击
选项设置为false

将侦听器添加到覆盖
并且您的映射变量名是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>


控制台中报告的任何错误？同样在下面，如果您的地图是mapCanvas
，为什么要使用map.setCenter（location）
？但是不应该弹出一些东西，以便您也可以编写一个标签吗？如果您的代码创建了一个信息窗口，那么将只有一个信息窗口。当前，placeMarker函数中的代码没有创建一个（如果这是您要求的）。
function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: mapCanvas
    });

    **mapCanvas**.setCenter(location);
}

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