Question

<!DOCTYPE html>
<html>
<head>
    <title>Gooogle Maps</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width ,initial-scale=1">
<link href="styles.css" rel="stylesheet" type="text/css">

</head >
<body >
    <h1>Google Maps</h1>
    <div id="map"></div>



<script src="app.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQz-dulnebn0pqnUxRai6D4L6I5smV-h8&callback=initMap">
</script>   
</body>
</html>

// AIzaSyBeh47W7e_8CXydTeB9YgXb-MnI-REt2GM   AIzaSyBQz-dulnebn0pqnUxRai6D4L6I5smV-h8


// Map options
window.initMap= function(){
    var options = {
        zoom:8,
        center:{lat:41.608635,lng:21.745274999999992}
    }   

    // New Map
    var map = new 
 google.maps.Map(document.getElementById('map'),options);

// Array of markers

var markers = [
    {
    coords:{lat:41.1231,lng:20.8016},
    content:'<h1>Ohrid</h1>'
    },
    {
    coords:{lat:41.03143,lng:21.33474},
    content:'<h1>Bitola</h1>'
    },
    {
    coords:{lat:41.9973,lng:21.4280},
    content:'<h1>Skopje</h1>'
    }
]

// loop 

for(var i = 0; i<markers.length;i++){
    addMarker(markers[i]);
}

    // add marker function
function addMarker(props){
    var marker = new google.maps.Marker({
        position:props.coords,
        map:map
    });

    if(props.content){
         var infoWindow = new google.map.InfoWindow({
         content:props.content
    });

    marker.addListener('click', function() {
        infoWindow.open(map,marker);
    }); 
    }

  }
}

我尝试将google地图的html脚本更改为最后一个，并在脚本文件中将async和defer last更改为最后一个。我在一篇文章中建议使用window.initMap = function（），但仍然有错误。我在一篇文章中读到你需要放置适当的命名空间。这是给我的例子：所以我真的不知道要包含哪些有效命名空间。请帮忙

Answer 1

Hej Emire，

你错过了 new google.map S .InfoWindow

// Map options
function initMap(){
  var options = {
    zoom: 8,
    center: {
      lat: 41.608635,
      lng: 21.745274999999992
    }
  }

  // New Map
  var map = new
  google.maps.Map(document.getElementById('map'), options);

  // Array of markers

  var markers = [{
      coords: {
        lat: 41.1231,
        lng: 20.8016
      },
      content: '<h1>Ohrid</h1>'
    },
    {
      coords: {
        lat: 41.03143,
        lng: 21.33474
      },
      content: '<h1>Bitola</h1>'
    },
    {
      coords: {
        lat: 41.9973,
        lng: 21.4280
      },
      content: '<h1>Skopje</h1>'
    }
  ]

  // loop 

  for (var i = 0; i < markers.length; i++) {
    addMarker(markers[i]);
  }

  // add marker function
  function addMarker(props) {
    var marker = new google.maps.Marker({
      position: props.coords,
      map: map
    });

    if (props.content) {
      var infoWindow = new google.maps.InfoWindow({
        content: props.content
      });

      marker.addListener('click', function() {
        infoWindow.open(map, marker);
      });
    }

  }
}
initMap();

#map{
  height: 500px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQz-dulnebn0pqnUxRai6D4L6I5smV-h8"></script>

<h1>Google Maps</h1>
<div id="map"></div>

Answer 2

// Map options
function initMap(){
  var options = {
    zoom: 8,
    center: {
      lat: 41.608635,
      lng: 21.745274999999992
    }
  }

  // New Map
  var map = new
  google.maps.Map(document.getElementById('map'), options);

  // Array of markers

  var markers = [{
      coords: {
        lat: 41.1231,
        lng: 20.8016
      },
      content: '<h1>Ohrid</h1>'
    },
    {
      coords: {
        lat: 41.03143,
        lng: 21.33474
      },
      content: '<h1>Bitola</h1>'
    },
    {
      coords: {
        lat: 41.9973,
        lng: 21.4280
      },
      content: '<h1>Skopje</h1>'
    }
  ]

  // loop 

  for (var i = 0; i < markers.length; i++) {
    addMarker(markers[i]);
  }

  // add marker function
  function addMarker(props) {
    var marker = new google.maps.Marker({
      position: props.coords,
      map: map
    });

    if (props.content) {
      var infoWindow = new google.maps.InfoWindow({
        content: props.content
      });

      marker.addListener('click', function() {
        infoWindow.open(map, marker);
      });
    }

  }
}
initMap();

#map{
  height: 500px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQz-dulnebn0pqnUxRai6D4L6I5smV-h8"></script>

<h1>Google Maps</h1>
<div id="map"></div>

initMap不是函数和Uncaught TypeError：无法读取未定义的属性“InfoWindow”

2 个答案: