我有一個谷歌地圖專案，我想在點擊標記時在彈出視窗中獲取商店資訊。但是，當我單擊標記時，它會說“讀取時無法讀取未定義setContent”。
誰能解釋為什么這不允許我的 html 被設定到infoWindow？
var map;
var markers = [];
var infoWindow;
var locationSelect;
let stores = [{
"recommendation": {},
"storeNumber": "5758-13907",
"id": "15051",
"name": "La Cienega & Gregory Way",
"phoneNumber": "310-659-9562",
"coordinates": {
"latitude": 34.063584,
"longitude": -118.376354
},
"regulations": [],
"address": {
"streetAddressLine1": "257 S. La Cienega Blvd.",
"streetAddressLine2": null,
"streetAddressLine3": null,
"city": "Beverly Hills",
"countrySubdivisionCode": "CA",
"countryCode": "US",
"postalCode": "902113301"
},
"timeZoneInfo": {
"currentTimeOffset": -420,
"windowsTimeZoneId": "Pacific Standard Time",
"olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
},
"brandName": "Starbucks",
"ownershipTypeCode": "CO",
"open": true,
"openStatusText": "Open until 6:00 PM",
"addressLines": ["257 S. La Cienega Blvd.", "Beverly Hills, CA 90211"],
"mop": {
"ready": false,
"wait": null
},
"schedule": [{
"dayName": "Today",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tomorrow",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Monday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tuesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Wednesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Thursday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Friday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}],
"features": [{
"code": "WA",
"name": "Oven-warmed Food"
}, {
"code": "VS",
"name": "Verismo"
}, {
"code": "CD",
"name": "Mobile Payment"
}, {
"code": "DR",
"name": "Digital Rewards"
}, {
"code": "LB",
"name": "LaBoulange"
}, {
"code": "GO",
"name": "Google Wi-Fi"
}, {
"code": "XO",
"name": "Mobile Order and Pay"
}, {
"code": "MX",
"name": "Music Experience"
}, {
"code": "NB",
"name": "Nitro Cold Brew"
}, {
"code": "BE",
"name": "Blonde Espresso"
}, {
"code": "LU",
"name": "Lunch"
}, {
"code": "PS",
"name": "Playbook Store System"
}, {
"code": "WC",
"name": "Wireless Charging"
}, {
"code": "UE",
"name": "tbd - Uber Eats"
}],
"slug": "la-cienega-gregory-way-257-s-la-cienega-blvd-beverly-hills-ca-902113301-u"
}, {
"recommendation": {},
"storeNumber": "5577-1851",
"id": "14753",
"name": "Fairfax & Olympic",
"phoneNumber": "(323) 634-7845",
"coordinates": {
"latitude": 34.057968,
"longitude": -118.363715
},
"regulations": [],
"address": {
"streetAddressLine1": "6066 West Olympic Boulevard",
"streetAddressLine2": null,
"streetAddressLine3": null,
"city": "Los Angeles",
"countrySubdivisionCode": "CA",
"countryCode": "US",
"postalCode": "900364402"
},
"timeZoneInfo": {
"currentTimeOffset": -420,
"windowsTimeZoneId": "Pacific Standard Time",
"olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
},
"brandName": "Starbucks",
"ownershipTypeCode": "CO",
"open": true,
"openStatusText": "Open until 6:00 PM",
"addressLines": ["6066 West Olympic Boulevard", "Los Angeles, CA 90036"],
"mop": {
"ready": false,
"wait": null
},
"schedule": [{
"dayName": "Today",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tomorrow",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Monday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tuesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Wednesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Thursday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Friday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}],
"features": [{
"code": "WA",
"name": "Oven-warmed Food"
}, {
"code": "VS",
"name": "Verismo"
}, {
"code": "CD",
"name": "Mobile Payment"
}, {
"code": "DR",
"name": "Digital Rewards"
}, {
"code": "LB",
"name": "LaBoulange"
}, {
"code": "GO",
"name": "Google Wi-Fi"
}, {
"code": "XO",
"name": "Mobile Order and Pay"
}, {
"code": "MX",
"name": "Music Experience"
}, {
"code": "NB",
"name": "Nitro Cold Brew"
}, {
"code": "BE",
"name": "Blonde Espresso"
}, {
"code": "LU",
"name": "Lunch"
}, {
"code": "PS",
"name": "Playbook Store System"
}, {
"code": "UE",
"name": "tbd - Uber Eats"
}],
"slug": "fairfax-olympic-6066-west-olympic-boulevard-los-angeles-ca-9003644"
}];
function initMap() {
var losAngeles = {
lat: 34.063380,
lng: -118.358080
};
map = new google.maps.Map(document.getElementById('map'), {
center: losAngeles,
zoom: 11
});
showStoreMarkers();
};
function showStoreMarkers() {
stores.forEach(function(store, index) {
var latlng = new google.maps.LatLng(
store.coordinates.latitude,
store.coordinates.longitude
);
var name = store.name;
var address = store.addressLines[0];
createMarker(latlng, name, address);
});
};
function createMarker(latlng, name, address) {
var html = name;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
};<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div id="stores-list" class="stores-list"></div>
</div>
<div class="col-lg-9">
<div id="map"></div>
</div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBImeeitkm-wI-p8SfcYAjy5UyEpb5ciVA&callback=initMap">
</script>uj5u.com熱心網友回復：
這行得通。注意我是如何宣告資訊視窗的。另外，請注意我在沒有回呼的情況下開始我的 javascript google api 呼叫。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index2</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow({ zIndex: 900, "maxWidth": 280});
var locationSelect;
let stores = [{
"recommendation": {},
"storeNumber": "5758-13907",
"id": "15051",
"name": "La Cienega & Gregory Way",
"phoneNumber": "310-659-9562",
"coordinates": {
"latitude": 34.063584,
"longitude": -118.376354
},
"regulations": [],
"address": {
"streetAddressLine1": "257 S. La Cienega Blvd.",
"streetAddressLine2": null,
"streetAddressLine3": null,
"city": "Beverly Hills",
"countrySubdivisionCode": "CA",
"countryCode": "US",
"postalCode": "902113301"
},
"timeZoneInfo": {
"currentTimeOffset": -420,
"windowsTimeZoneId": "Pacific Standard Time",
"olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
},
"brandName": "Starbucks",
"ownershipTypeCode": "CO",
"open": true,
"openStatusText": "Open until 6:00 PM",
"addressLines": ["257 S. La Cienega Blvd.", "Beverly Hills, CA 90211"],
"mop": {
"ready": false,
"wait": null
},
"schedule": [{
"dayName": "Today",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tomorrow",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Monday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tuesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Wednesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Thursday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Friday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}],
"features": [{
"code": "WA",
"name": "Oven-warmed Food"
}, {
"code": "VS",
"name": "Verismo"
}, {
"code": "CD",
"name": "Mobile Payment"
}, {
"code": "DR",
"name": "Digital Rewards"
}, {
"code": "LB",
"name": "LaBoulange"
}, {
"code": "GO",
"name": "Google Wi-Fi"
}, {
"code": "XO",
"name": "Mobile Order and Pay"
}, {
"code": "MX",
"name": "Music Experience"
}, {
"code": "NB",
"name": "Nitro Cold Brew"
}, {
"code": "BE",
"name": "Blonde Espresso"
}, {
"code": "LU",
"name": "Lunch"
}, {
"code": "PS",
"name": "Playbook Store System"
}, {
"code": "WC",
"name": "Wireless Charging"
}, {
"code": "UE",
"name": "tbd - Uber Eats"
}],
"slug": "la-cienega-gregory-way-257-s-la-cienega-blvd-beverly-hills-ca-902113301-u"
}, {
"recommendation": {},
"storeNumber": "5577-1851",
"id": "14753",
"name": "Fairfax & Olympic",
"phoneNumber": "(323) 634-7845",
"coordinates": {
"latitude": 34.057968,
"longitude": -118.363715
},
"regulations": [],
"address": {
"streetAddressLine1": "6066 West Olympic Boulevard",
"streetAddressLine2": null,
"streetAddressLine3": null,
"city": "Los Angeles",
"countrySubdivisionCode": "CA",
"countryCode": "US",
"postalCode": "900364402"
},
"timeZoneInfo": {
"currentTimeOffset": -420,
"windowsTimeZoneId": "Pacific Standard Time",
"olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
},
"brandName": "Starbucks",
"ownershipTypeCode": "CO",
"open": true,
"openStatusText": "Open until 6:00 PM",
"addressLines": ["6066 West Olympic Boulevard", "Los Angeles, CA 90036"],
"mop": {
"ready": false,
"wait": null
},
"schedule": [{
"dayName": "Today",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tomorrow",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Monday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tuesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Wednesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Thursday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Friday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}],
"features": [{
"code": "WA",
"name": "Oven-warmed Food"
}, {
"code": "VS",
"name": "Verismo"
}, {
"code": "CD",
"name": "Mobile Payment"
}, {
"code": "DR",
"name": "Digital Rewards"
}, {
"code": "LB",
"name": "LaBoulange"
}, {
"code": "GO",
"name": "Google Wi-Fi"
}, {
"code": "XO",
"name": "Mobile Order and Pay"
}, {
"code": "MX",
"name": "Music Experience"
}, {
"code": "NB",
"name": "Nitro Cold Brew"
}, {
"code": "BE",
"name": "Blonde Espresso"
}, {
"code": "LU",
"name": "Lunch"
}, {
"code": "PS",
"name": "Playbook Store System"
}, {
"code": "UE",
"name": "tbd - Uber Eats"
}],
"slug": "fairfax-olympic-6066-west-olympic-boulevard-los-angeles-ca-9003644"
}];
var losAngeles = { lat: 34.063380, lng: -118.358080 };
map = new google.maps.Map(document.getElementById('map'), {
center: losAngeles,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
showStoreMarkers();
function showStoreMarkers() {
stores.forEach(function (store, index) {
var latlng = new google.maps.LatLng(
store.coordinates.latitude,
store.coordinates.longitude
);
var name = store.name;
var address = store.addressLines[0];
createMarker(latlng, name, address);
});
};
function createMarker(latlng, name, address) {
var html = name;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
};
});
</script>
</head>
<body>
<div style="height: 535px; overflow-x: hidden" id="map">hello map1</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div id="stores-list" class="stores-list"></div>
</div>
<div class="col-lg-9">
</div>
</div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/443690.html
標籤：javascript html jQuery 谷歌地图
下一篇：賽普拉斯-userAgent開關