addListener click沒有顯示添加標記

-1

我已經創建了下面的代碼，但是我試圖讓用戶添加一個標記，我嘗試過使用addListener和點擊事件。當我嘗試點擊地圖時什麼也沒有發生，我做錯了什麼？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>

來源

2016-04-27 Frederik

控制檯中報告的任何錯誤？ –

也在下面，如果你的地圖是'mapCanvas'，你爲什麼要用'map.setCenter（location）'？ – skobaljic

的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

來源

2016-04-27 20:25:19 geocodezip

但不應該有東西出現，所以你可以寫一個拉夫？ – Frederik

如果你的代碼創建了一個，將只有一個InfoWindow。目前'placeMarker'函數中的代碼不會創建一個（如果這就是您要求的）。 – geocodezip

疊加層將阻止默認映射。將偵聽器添加到疊加層。

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>

來源

2016-04-27 20:21:15

而且地圖變量名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>

來源

2016-04-27 20:44:59 Metin

addListener click沒有顯示添加標記

回答

相關問題