如何使用JavaScript在Google Maps API中只获取一个标记

时间:2016-01-16 14:20:20

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

我的代码:

<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

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

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

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

function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

我得到了一个新的标记。如果我再次点击它,我怎么能删除另一个?

顺便说一下:恳求:Google Maps how to get to show only one marker?

想要使用它,但它最令人工作(在控制台中:tCurrentPosition()和watchPosition()在不安全的起源上被弃用,并且将来会删除支持。你应该考虑将应用程序切换到安全的来源,例如作为HTTPS。有关详细信息,请参阅https://goo.gl/rStTGz。)

谢谢:)

2 个答案:

答案 0 :(得分:2)

如果您只需要一个标记,只需创建一个并根据需要移动它,就可以选择一个选项。

proof of concept fiddle

代码段

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    let destinationToFVC:ViewController = self.storyboard!.instantiateViewControllerWithIdentifier("FVCont") as! ViewController

    if let indexPath = self.tableView.indexPathForSelectedRow {
        let row1 = Int(indexPath.row)
        destinationToFVC.currentObject = objects?[row1] as! PFObject!


    }
    navigationController?.pushViewController(destinationToFVC, animated: true)

}
var map;
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var marker;
var infowindow;

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

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

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

function placeMarker(location) {
  if (!marker || !marker.setPosition) {
    marker = new google.maps.Marker({
      position: location,
      map: map,
    });
  } else {
    marker.setPosition(location);
  }
  if (!!infowindow && !!infowindow.close) {
    infowindow.close();
  }
  infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map, marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

答案 1 :(得分:0)

而不是:

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

尝试使用:

google.maps.event.addListener(map, 'click', function(event) {
    setMapOnAll(null);
    placeMarker(event.latLng);
}

因此,您在点击时删除所有当前标记并在x,y位置添加新标记