我无法在已经使用其他符号标记谷歌的地方放置标记。

时间:2015-01-28 07:20:39

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

未显示已由Google标记的地点的信息窗口和标记。例如:如果你运行代码并点击任意位置,结果会出现一个标记和一个信息窗口,但对于那些被标记为“不伦瑞克”,“露天剧场”等标记的地方不会发生这种情况。

<!DOCTYPE html>
<html>
<head>
<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:14,
        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() + ' Longitude: ' + location.lng() 
    });
    infowindow.open(map,marker);
}

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

<body>
    <div id="googleMap" style="width:1000px;height:1000px;"></div>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

当您点击这样的地点(POI)时,地图上不会触发任何点击。

如果您不想隐藏POI,则必须自行触发点击。

可能的方法(见:How to get a click event when a user clicks a (business) place on the map

//keep a reference to the original setPosition-function
var fx = google.maps.InfoWindow.prototype.setPosition;

//override the built-in setPosition-method
google.maps.InfoWindow.prototype.setPosition = function () {

  //this property isn't documented, but as it seems
  //it's only defined for InfoWindows opened on POI's
  if (this.logAsInternal) {
    google.maps.event.addListenerOnce(this, 'map_changed',function () {
      var map = this.getMap();
      //the infoWindow will be opened, usually after a click on a POI
      if (map) {
        //trigger the click
        google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
        //hide the default-infoWindow of the POI
        this.setMap(null);
      }
    });
  }
    //call the original setPosition-method
  fx.apply(this, arguments);
};

演示:http://jsfiddle.net/doktormolle/1yrpm98q/

答案 1 :(得分:0)

隐藏这些POI:

styles: [{
    featureType: "poi",
    elementType: "labels",
    stylers: [{
        visibility: "off"
    }]
}]

工作代码段:

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

function initialize() {
  var mapProp = {
    center: myCenter,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      featureType: "poi",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }]
  };

  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() + ' 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
}
<script src="http://maps.google.com/maps/api/js"></script>
<div id="googleMap"></div>