Googlemap - 如何添加和删除标记？

Question

我想在用户点击 google 地图时放置标记，下面是我的代码。它从这个 -36.8484597,174.7633315

开始

    var map;
    var myCenter = new google.maps.LatLng(-36.8484597,174.7633315);

    function initialize()
    {
        var mapProp = {
          center:myCenter,
          zoom:2,
          mapTypeId:google.maps.MapTypeId.ROADMAP
         };

        var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);

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

        marker.setMap(map);

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

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

    google.maps.event.addDomListener(window, 'load', initialize);

但是当我点击地图时，标记根本不显示。有什么想法吗？

Answer 1

您的地图变量是初始化函数的局部变量。在placeMarker函数中是不可用的，除非你在initialize函数中传入或去掉它前面的var关键字。

function initialize()
{
    var mapProp = {
      center:myCenter,
      zoom:2,
      mapTypeId:google.maps.MapTypeId.ROADMAP
     };

    map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);

jsfiddle

代码段：

var map;
var myCenter = new google.maps.LatLng(-36.8484597, 174.7633315);

function initialize() {
    var mapProp = {
        center: myCenter,
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);

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

    marker.setMap(map);

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

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

google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

Googlemap - 如何添加和删除标记？

Googlemap - how to add and delete marker?

google-maps

google-maps-markers