Google 地图标记错误，InvalidValueError

Question

正在尝试显示多个标记，但它不起作用。

我正尝试在 google 地图上显示多个标记，但出现多个错误 InvalidValueError: setTitle: 不是字符串。

InvalidValueError：setCenter：不是具有有限坐标的 LatLng 或 LatLngLiteral：在属性 lat：NaN 不是可接受的值

<script>
        let cord = []
        $(`.cord`).each(( i , el) => {
            cord[i] = {
               'latitude': Number($(el).data('latitude')),
               'longitude': Number($(el).data('longitude')),
            }
        });
              // Initialize and add the map
              function initMap() {
                let uluru;
                uluru = { lat: -33, lng: 151 };
                 // The map, centered at Uluru
                const map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 4,
                    center: uluru,
                });
                var i = 0;
                while(Object.values(cord).length>i){                    
                // The marker, positioned at Uluru
                const map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 4,
                    center: uluru,
                });
                uluru = { lat: cord[i]['latitude'], lng: cord[i]['longitude'] };
                    const marker = new google.maps.Marker({
                        position: uluru,
                        map: map,
                        title: i,
                        });
                  i++;
                } //loop
              }   //map
    </script>

Answer 1

i 不是字符串，是数字。要修复错误，InvalidValueError: setTitle: not a string，将其更改为一个：

const marker = new google.maps.Marker({
                        position: uluru,
                        map: map,
                        title: "" + i, // Change `i` to a string
                        });

let cord = []
$(`.cord`).each((i, el) => {
  cord[i] = {
    'latitude': Number($(el).data('latitude')),
    'longitude': Number($(el).data('longitude')),
  }
});
// Initialize and add the map
function initMap() {
console.log(cord);
  let uluru;
  uluru = {
    lat: -33,
    lng: 151
  };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  var i = 0;
  while (Object.values(cord).length > i) {
    uluru = {
      lat: cord[i]['latitude'],
      lng: cord[i]['longitude']
    };
    const marker = new google.maps.Marker({
      position: uluru,
      map: map,
      title: ""+i,
    });
    i++;
  } //loop
} //map

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div class="cord" data-latitude="-33" data-longitude="151"></div>
    <div class="cord" data-latitude="-34.9284989" data-longitude="138.6007456"></div>
    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Google 地图标记错误，InvalidValueError

Google Map marker errors, InvalidValueError

javascript

google-maps

google-maps-api-3

google-maps-markers