谷歌地图api标记未在浏览器中添加

时间:2014-08-06 18:35:24

标签: google-maps google-maps-api-3

我正在尝试在发生鼠标事件时在Google地图上添加标记。显示地图但未在鼠标单击事件上添加标记。使地图变量全局化也没有用。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<!-- loading google map api -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- exact map api script -->
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(28.0, 84.0),
      zoom: 4
    };
    <!-- Map constructor creates a new map inside a given html container,typically a div -->
    var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

    //click event on map with event argument pass
    google.maps.event.addListener(map, 'click' ,function(e){
        placeMarker(e.latLng,map);
    });
}//initialize function ends
    function placeMarker(position, map){
        var marker=google.maps.Marker({
        position:position,
        map:map
        });
    map.panTo(position);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>

1 个答案:

答案 0 :(得分:1)

创建标记时,您缺少new个关键字:

var marker = google.maps.Marker({ // <-- see this line
    position: position,
    map: map
});

将其更改为:

var marker = new google.maps.Marker({ 
    position: position,
    map: map
});

它有效。

干杯。