试图显示多个标记,但不起作用。
我试图在谷歌地图上显示多个标记,但我遇到了多个错误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>
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>