【问题标题】:jQuery Google Maps Adding a Marker on ClickjQuery Google Maps 在点击时添加标记
【发布时间】:2012-06-23 08:42:26
【问题描述】:

我正在使用 gmaps.js (https://github.com/hpneo/gmaps)

我想在点击地图上的某个位置时在地图上添加一个标记。如果用户单击第二个位置,则前一个标记应移动到新位置或被删除并替换为新标记。

现在确定 Lib 是否支持。

http://bakasura.in/startupsradar/add.html

$(document).ready(function () {
    var map = new GMaps({
        div: '#map',
        lat: 13.00487,
        lng: 77.576729,
        zoom: 13
    });

    map.addMarker({
        lat: 13.00487,
        lng: 77.576729,
        title: 'Mink7',
        infoWindow: {
            content: 'HTML Content'
        }
    });
    /*
    GMaps.geolocate({
        success: function (position) {
            map.setCenter(position.coords.latitude, position.coords.longitude);
        },
        error: function (error) {
            alert('Geolocation failed: ' + error.message);
        },
        not_supported: function () {
            alert("Your browser does not support geolocation");
        },
        always: function () {
            //alert("Done!");
        }
    });
    */
});

【问题讨论】:

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


    【解决方案1】:
    google.maps.event.addListener(_map, "click", function(event) {
        if(_marker) {
            _marker.setPosition(event.latLng);
        } else {  
            _marker = new google.maps.Marker({
                position: event.latLng,
                map: _map,
                title: "myTitle"
            });
        }
    });
    

    刚刚看到另一个答案,如果您不想每次都创建标记,请使用此答案.. _marker 应该是一个全局变量。

    【讨论】:

      【解决方案2】:

      就我个人而言,我使用标记的全局变量(如果我需要更多标记并且以后想访问它们,则使用数组),以便我可以删除它并在其他地方重新创建它。

      // instantiate your var map
      // ...
      
      google.maps.event.addListener(map, "click", function(event) {
          if(markermap) {
              markermap.setMap(null);
          }
      
          markermap = new google.maps.Marker({
              position: event.latLng,
              map: myMap,
              title: "myTitle"
          });
      });
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-01-11
        • 2017-06-04
        • 2020-03-02
        • 2020-08-20
        • 2018-05-15
        • 2015-09-03
        • 1970-01-01
        • 2018-07-22
        相关资源
        最近更新 更多