我正在尝试创建一个包含3张幻灯片的滑块，每张幻灯片都包含一个迷你地图，标记指向某个位置。 我设法创建了一张幻灯片，但是每次尝试在此页面上创建多个幻灯片都会导致失败。 这是我到目前为止的代码：
HTML + PHP
<?php $rows = get_field('job_offers'); $row_count = count($rows); for ($i = 0; $i <div id='googleMap' style="position:absolute;top:0;right:0;width:180px;height:100%;"> 和jQuery
var geocoder = new google.maps.Geocoder(); var map; var locations = ["London",'Paris','Barcelona']; var pos; function initialize() { google.maps.visualRefresh = true; getGeoCode(); } function getGeoCode() { for (var i=0; i<3 ; i++) { geocoder.geocode({'address': locations[i]}, function(results, status) { if (status === google.maps.GeocoderStatus.OK) { pos[i] = results[0].geometry.location; var mapOptions = { zoom: 8, center: pos[i], mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, styles: [ { stylers: [{hue:'#C4268C'},{lightness:-60},{saturation:100}]} ] }; map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions); var image = '/images/marker.png'; var marker = new google.maps.Marker({ position: pos[i], icon:image }); marker.setMap(map[i]); } else { alert("Not found"); } }); } } google.maps.event.addDomListener(window, 'load', initialize);
当我没有尝试使用数组时，一切都很好。 我会感激任何提示。 干杯，E。
下面的代码修复了函数闭包的问题（makeMap函数保持对“i”的值的闭包，以便在地理编码器回调运行时使用）：
var geocoder = new google.maps.Geocoder(); var map = []; var locations = ["London",'Paris','Barcelona']; var pos = []; var infowindow = new google.maps.InfoWindow({}); function initialize() { google.maps.visualRefresh = true; getGeoCode(); } function makeMap(i) { geocoder.geocode({'address': locations[i]}, function(results, status) { if (status === google.maps.GeocoderStatus.OK) { pos[i] = results[0].geometry.location; var mapOptions = { zoom: 8, center: pos[i], mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, styles: [ { stylers: [{hue:'#C4268C'},{lightness:-60},{saturation:100}]} ] }; map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions); // var image = '/images/marker.png'; var marker = new google.maps.Marker({ position: pos[i], // icon:image }); marker.setMap(map[i]); } else { alert("Not found"); } }); } function getGeoCode() { for (var i=0; i<3 ; i++) { makeMap(i); } } google.maps.event.addDomListener(window, 'load', initialize);
工作小提琴
代码段：
var geocoder = new google.maps.Geocoder(); var map = []; var locations = ["London", 'Paris', 'Barcelona']; var pos = []; var infowindow = new google.maps.InfoWindow({}); function initialize() { google.maps.visualRefresh = true; getGeoCode(); } function makeMap(i) { geocoder.geocode({ 'address': locations[i] }, function(results, status) { if (status === google.maps.GeocoderStatus.OK) { pos[i] = results[0].geometry.location; var mapOptions = { zoom: 8, center: pos[i], mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, styles: [{ stylers: [{ hue: '#C4268C' }, { lightness: -60 }, { saturation: 100 }] }] }; map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions); // var image = '/images/marker.png'; var marker = new google.maps.Marker({ position: pos[i], // icon:image }); marker.setMap(map[i]); } else { alert("Not found"); } }); } function getGeoCode() { for (var i = 0; i < 3; i++) { makeMap(i); } } google.maps.event.addDomListener(window, 'load', initialize);
#googleMap0, #googleMap1, #googleMap2, #googleMap3 { width: 500px; height: 500px; }