Javascript 单张数据格式

在原始问题和帖子修改后发表评论。我的代码现在可以工作了，但我仍然不明白为什么应该是数组数组的东西不能工作，但却可以工作

通过RubyonRails使用传单制作地图。获取存储为字符串以供JavaScript理解的数组时出现问题（完整代码位于）。部分代码

streets.js

。靠近末尾的console.logs是关于以下内容的问题：

"use strict";

function makeMap() {
// Map tile URLs
var hamlin1908url = 'https://api.mapbox.com/styles/v1/mtnbiker/cj3gnezpq00152rt5o6g3kyqp/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibXRuYmlrZXIiLCJhIjoiNmI5ZmZjMzAyNzJhY2Q0N2ZlN2E1ZTdkZjBiM2I1MTUifQ.6R3ptz9ejWpxcdZetLLRqg', 
  Hill1928aws =    'https://crores.s3.amazonaws.com/tiles/1928Hills/{z}/{x}/{y}.png',
  baistDetailAws = 'https://crores.s3.amazonaws.com/tiles/baistDetail/{z}/{x}/{y}.png', 
  baistKMaws     = "https://crores.s3.amazonaws.com/tiles/bkm/{z}/{x}/{y}.png",
  rueger1902aws  = "https://crores.s3.amazonaws.com/tiles/1902rueger/{z}/{x}/{y}.png",
  woods1908url   = "https://crores.s3.amazonaws.com/tiles/1908woods/{z}/{x}/{y}.png",
  // sanborn1894km1aURL = "//knobby.ws/crorestiles/sanborn1894km1a/{z}/{x}/{y}.png",
  sanborn1888km1aURL = "https://crores.s3.amazonaws.com/tiles/1888SanbornKM1a/{z}/{x}/{y}.png",
  sanborn1894km1aURL = "https://crores.s3.amazonaws.com/tiles/1894SanbornKM1a/{z}/{x}/{y}.png",
  osmUrl    = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      esriUrl   = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServe\
  r/tile/{z}/{y}/{x}',
  googleUrl = 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
  // bingUrl = "baseMapUrl = new L.BingLayer('AtGe6-aWfp_sv8DMsQeQBgTVE0AaVI2WcT42hmv12YSO-PPROsm9_UvdRyL91jav, {type: 'Road'});"
  // bingUrl = "http://bing.com/maps/default.aspx?cp=34.05~118.25&lvl=12&style=r",
  // bingUrl = "https://dev.virtualearth.net/REST/v1/ Imagery/Map/resourcePath?queryParameters&key=AtGe6-aWfp_sv8DMsQeQBgTVE0AaVI2WcT42hmv12YSO-PPROsm9_UvdRyL91jav"

// Links for attribution
var osmLink  = '<a href="https://openstreetmap.org">OpenStreetMap</a>',
  osmCopy = '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  mapboxCopy = '<a href="https://www.mapbox.com/map-feedback/">Mapbox</a>',
  esriLink = '<a href="https://www.esri.com/">Esri</a>',
  mbLink   = '<a href="https://mapbox.com/">OpenStreetMap</a>',
  rumseyLink = '<a href="http://www.davidrumsey.com">The David Rumsey Map Collection</a>',
  csunLink = "",
  bigBlogMapLink = 'http://www.bigmapblog.com'

// Attribution
  var osmAttrib = '&copy; ' + osmLink + ' Contributors',
  esriAttrib = 'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP,\
and the GIS User Community & '+ esriLink,
  mapboxAttrib = '&copy; ' + mapboxCopy + '&copy;' + osmCopy,
  mwAttrib ='https://thinkwhere.wordpress.com',
  rumseyAttrib = rumseyLink,
  csunAttrib = csunLink,
  bigBlogMapAttrib = bigBlogMapLink,
  hamlinAttrib = ""

// Putting together as a Leaftlet tileLayer. First variable is the URL of the tiles
var rueger1902Map       = L.tileLayer(rueger1902aws,    {attribution: mapboxAttrib}),
    osmMap      = L.tileLayer(osmUrl,       {attribution: osmAttrib}),
    esriMap     = L.tileLayer(esriUrl,      {attribution: esriAttrib}),
    // bing        = L.tileLayer(bingUrl), // This approach doesn't seem to work, but the following does. bing is easier to read than OSM because many major street names don't show up in OSM
    bing = L.tileLayer.bing('AtGe6-aWfp_sv8DMsQeQBgTVE0AaVI2WcT42hmv12YSO-PPROsm9_UvdRyL91jav'),
    google      = L.tileLayer(googleUrl,      {attribution: 'Google'}),
    hill1928 = L.tileLayer(Hill1928aws,  {attribution: bigBlogMapAttrib}),
    baistDetail = L.tileLayer(baistDetailAws, {attribution: rumseyAttrib}),
    baistKM     = L.tileLayer(baistKMaws,   {attribution: rumseyAttrib}),
    rueger1902  = L.tileLayer(rueger1902aws),
    hamlin1908   = L.tileLayer(hamlin1908url),
    woods1908    = L.tileLayer(woods1908url,  {attribution: rumseyAttrib}),
    sanborn1894km1a = L.tileLayer(sanborn1894km1aURL,  {attribution: csunAttrib}),
    sanborn1888km1a = L.tileLayer(sanborn1888km1aURL,  {attribution: csunAttrib})

var overlayLayers = {
  "<span style='color: blue'>1921 Baist detail</span>"   : baistDetail,
  "<span style='color: blue'>1921 Baist Key Map</span>"  : baistKM,
  "1928 Hill"    : hill1928,
  "woods1908"    : woods1908,
  "1908 Hamlin"  : hamlin1908,
  "1902 Rueger"  : rueger1902,
  "1894 Sanborn" : sanborn1894km1a,
  "1888 Sanborn" : sanborn1888km1a
};
var baseLayers = {
  "<span style='color: green'>Bing</span>"               : bing,
  "<span style='color: orange'>OSM Street</span>"        : osmMap, 
  "<span style='color: green' >ESRI Satellite</span>"    : esriMap,
  "<span style='color: green' >Google Satellite</span>"  : google
}                             
var map = L.map('map').setView([34.05, -118.25], 13,);
console.log("95. typeof gon.streetExtentArray: " + typeof gon.streetExtentArray);
var streetExtentArray = gon.streetExtentArray;
console.log("99. typeof streetExtentArray = gon.streetExtentArray: " + typeof streetExtentArray);
var arrayStreetExtent = JSON.parse(streetExtentArray); // using intermediary for testing
console.log("121. arrayStreetExtent: " + arrayStreetExtent + ". typeOf: "+ arrayStreetExtent.typeOf);
map.fitBounds(arrayStreetExtent); // zooms to area of interest
L.polyline(arrayStreetExtent).addTo(map);
L.tileLayer.bing('AtGe6-aWfp_sv8DMsQeQBgTVE0AaVI2WcT42hmv12YSO-PPROsm9_UvdRyL91jav').addTo(map);
L.control.layers( baseLayers, overlayLayers, {collapsed:true} ).addTo(map);
}  // end makeMap

ArrayStreextent

显示为一维数组，其外观应类似于[[34，-118]，[34.1，-118.2]]。但是

map.fitBounds（ArrayStreextent）

正确地解释它，坐标的行字符串显示正确

---

对我来说是个谜，但它是有效的。

map.fitBounds

需要一个对象，或者一个由成对坐标组成的数组

您正在尝试使用数组输入，但将其作为字符串而不是数组使用

因此，有两个简单的解决方案：

• 在将字符串传递给gon之前，将其转换为Ruby中的数组

---

• 或者在JavaScript中解析字符串：

  JSON.parse（streetExtentArray）

---

您是否检查了在

StreetExtentaray

中记录的内容类型？它是字符串还是数组？typeof gon.streettexterray:string。streetExtentArray的类型：stringExpected行为

myArray.toString（）

：（在执行

console.log（myArray）

时使用）是否有方法在传递给JavaScript时查看

arrayStreetExtent

？即使在阅读了链接之后，我也不会猜到数组的数组会被展平，但它缺乏经验。Ruby

将[34.073492888603404，-118.28553155064584]、[34.0728530289903，-118.28437283635142]、[34.06673857126311，-118.27029660344125]、[34.06193912382981，-118.2596106827272593]、[34.073492888603404，-.118.285531535315554584]、[34.072858899903]、[118.285383635142.065142]、-118.259696827272725111]、-27041118]、[code>
，[34.06193912382981，-118.25961068272593]
对我来说更符合逻辑。”或者在JavaScript中解析字符串：JSON.parse（streetExtentArray）“将数组展平为一个简单数组，但数据是成对的点。变为：
[34.05904154805371，-118.261145258557,34.058232697865755，-118.25941789895298,34.0577082744388474，-118.25814116746189,34.0572549565647，-118.25762618333104]
如果您的字符串的格式是
“[[34.0590415480571，-118.261454155857]，[34.
”等，
JSON.parse
将正确解析。请理解，如果您不提供初始数据和代码，包括Ruby端的数据和代码，则无法为您提供帮助。我重新发布了，正如在文章中所述，它可以工作。正如@ghybs所述
JSON.parse（streetExtentArray）
以JavaScript理解的方式解析，即使console.log看起来不正确。
95. typeof gon.streetExtentArray: string
99. typeof streetExtentArray = gon.streetExtentArray: string
121. arrayStreetExtent: 34.073492888603404,-118.28553155064584,34.07285302899903,-118.28437283635142,34.06673857126311,-118.27029660344125,34.061