InfoWindow未定义的Google Maps API

Question

我想获取感兴趣的数组的content属性，因此在if marker.content下给我未定义的内容时，我创建了新的google.maps.InfoWindow

代码：

var map = null;


placesOfInterest = [
    { name: 'Charme da paulista', lat: -23.562172, lng: -46.655794, content:'<h1>Charme</h1>' },
    { name: 'The Blue Pub', lat: -23.563112, lng: -46.650338, content:'<h1>The Blue Pub</h1>' },
    { name: 'Veloso', lat: -23.585107, lng: -46.635219 },
    { name: 'Let\'s Beer', lat: -23.586508, lng: -46.641739 },
    { name: 'O\'Malley\'s', lat: -23.558296, lng: -46.665923 },
    { name: 'Finnegan\'s', lat: -23.559547, lng: -46.676794 },
    { name: 'Partisans', lat: -23.561049, lng: -46.682555 },
    { name: 'Morrison', lat: -23.555106, lng: -46.690883 },
    { name: 'Cão Véio', lat: -23.558130, lng: -46.679508 },
    { name: 'Cervejaria Nacional', lat: -23.564740, lng: -46.690641 },
    { name: 'Brewdog', lat: -23.561309, lng: -46.693935 },
    { name: 'Rei das Batidas', lat: -23.570613, lng: -46.705977 }
];

const customIcon = {
    path: 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
    fillColor: '#F7B217',
    fillOpacity: 0.98,
    scale: 0.98,
    strokeColor: '#666666',
    strokeWeight: 3
};

function addMarker(marker) {

    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(marker.lat, marker.lng),
        icon: customIcon,
        title: marker.name,

    });
    if(marker.content){
     var infoWindow = new google.maps.InfoWindow({
        content:marker.content
      });
      marker.addListener('click',function(){
        infoWindow.open(map, marker)
      });
    }
}



function initMap() {
    var mapOptions = {
        center: new google.maps.LatLng(-23.562172, -46.655794),
        gestureHandling: 'greedy',
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP]
        },
        disableDefaultUI: true,
        scaleControl: true,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT,
        }


    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);



    //Adicionando o primeiro marcador como exemplo
    for(var i = 0;i< placesOfInterest.length;i++ ){
      addMarker(placesOfInterest[i]);
    }

}

Answer 1

在addMarker函数中，您正在使用marker对象覆盖输入new google.maps.Marker数据，因此marker.content属性将永远不存在。

重命名输入参数或内部marker变量以避免冲突：

function addMarker(marker) {
    var gmarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(marker.lat, marker.lng),
        icon: customIcon,
        title: marker.name,
    });
    if(marker.content){
     var infoWindow = new google.maps.InfoWindow({
        content:marker.content
      });
      gmarker.addListener('click',function(){
        infoWindow.open(map, gmarker)
      });
    }
}

proof of concept fiddle

代码段：

var map = null;

var placesOfInterest = [{
    name: 'Charme da paulista',
    lat: -23.562172,
    lng: -46.655794,
    content: '<h1>Charme</h1>'
  }
];

const customIcon = {
  path: 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
  fillColor: '#F7B217',
  fillOpacity: 0.98,
  scale: 0.98,
  strokeColor: '#666666',
  strokeWeight: 3
};

function addMarker(marker) {
  var gmarker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(marker.lat, marker.lng),
    icon: customIcon,
    title: marker.name,
  });
  if (marker.content) {
    var infoWindow = new google.maps.InfoWindow({
      content: marker.content
    });
    gmarker.addListener('click', function() {
      infoWindow.open(map, gmarker)
    });
  }
}

function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(-23.562172, -46.655794),
    gestureHandling: 'greedy',
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP]
    },
    disableDefaultUI: true,
    scaleControl: true,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.DEFAULT,
    }
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  //Adicionando o primeiro marcador como exemplo
  for (var i = 0; i < placesOfInterest.length; i++) {
    addMarker(placesOfInterest[i]);
  }
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>