Question

我正在尝试创建带有标记的动态Google Map。如果手动添加数组数据，但不将其作为数组变量提取，则代码可以正常工作。

在控制台上打印阵列如下：

但这在Google Map循环中不起作用。但是，当数据的格式如下时，此循环确实起作用：

  library(rvest)
  library(readr)

  data =  read_html('https://www.theocc.com/webapps/series-search? 
  symbolType=U&symbol=AAPL')%>%html_text()

  x = read.table(data, header = T) 
  x = read_tsv(data)

我想我的问题是，如何在脚本中正确格式化动态数组变量？

这是完整的脚本：

var locationsSupplier = [
  ['London, UK',51.5073509,-0.1277583],
  ['Surrey, UK',51.3147593,-0.5599501]
]

以及从WP收集的数据：

function initMap() {

    $ = jQuery;

    var locationsSupplier = [
        ['London, UK',51.5073509,-0.1277583],
        ['Surrey, UK',51.3147593,-0.5599501]
    ]


    // Icons
    var iconMain = {
        url: mapVar.path + '/assets/svg/misc/custom-pin-icon.svg',
        scaledSize: new google.maps.Size(64, 64),
    };

    var iconSupplier = {
        url: mapVar.path + '/assets/svg/misc/custom-pin-icon.svg',
        scaledSize: new google.maps.Size(48, 48),
    };


    // Map Defaults
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(mapVar.lat,mapVar.lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    });


    // Supplier markers and info popup
    var infowindowSupplier = new google.maps.InfoWindow();
    var markerSupplier, i;

    for (i = 0; i < locationsSupplier.length; i++) {  
      markerSupplier = new google.maps.Marker({
        position: new google.maps.LatLng(locationsSupplier[i][1], locationsSupplier[i][2]),
        map: map,
        icon: iconSupplier
      });

      google.maps.event.addListener(markerSupplier, 'click', (function(markerSupplier, i) {
        return function() {
          infowindowSupplier.setContent(locationsSupplier[i][0]);
          infowindowSupplier.open(map, markerSupplier);
        }
      })(markerSupplier, i));
    }


    // Main marker and info popup
    var infowindow = new google.maps.InfoWindow();

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(mapVar.lat,mapVar.lng),
        map: map,
        icon: iconMain
      });

    marker.addListener('click', function() {
        infowindow.setContent(mapVar.address);
        infowindow.open(map, marker);
      });

}

Answer 1

通过设置功能循环来固定：

if(have_rows('suppliers')) : while(have_rows('suppliers')) : the_row();

      $supplier_marker = get_sub_field('supplier_marker');

      if($supplier_marker) {

        $suppliers[] = array(
          'address' => $supplier_marker['address'],
          'lat' => floatval($supplier_marker['lat']),
          'lng' => floatval($supplier_marker['lng'])
        );

      }

    endwhile; endif;

并调整脚本以使用这些变量：

f

or (i = 0; i < locationsSupplier.length; i++) {  
      markerSupplier = new google.maps.Marker({
        position: new google.maps.LatLng(locationsSupplier[i]['lat'], locationsSupplier[i]['lng']),
        map: map,
        icon: iconSupplier
      });

      google.maps.event.addListener(markerSupplier, 'click', (function(markerSupplier, i) {
        return function() {
          infowindowSupplier.setContent(locationsSupplier[i]['address']);
          infowindowSupplier.open(map, markerSupplier);
        }
      })(markerSupplier, i));
    }

动态谷歌地图

1 个答案: