我应该做任何变量转换吗？答案

【问题标题】：Should I do any variable conversion?我应该做任何变量转换吗？
【发布时间】：2015-12-01 13:58:12
【问题描述】：

我制作了下面的 HTML+javascript 程序来提供特定格式的输出，它首先从 "location" 数组中提取数组值并将它们放入 "a" 数组中，然后 for 循环以纬度和经度格式生成输出，

<!DOCTYPE html>
<html>
<body>


<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
var location =[33.53625,-111.92674,33.51049,-111.96279,33.50161,-111.90374];
var a =[{lat:location[0] , lng: location[1]},{lat: location[2], lng: location[3]},{lat: location[4], lng: location[5]}];


var txt = "";
var n;
var h;
for (x in a) {
    n=2*parseInt(x);
    h=(2*parseInt(x))+1;
    txt += "{lat: "+location[n]+" , lng:"+location[h]+"},"+"\n";
}
    document.getElementById("demo").innerHTML = String(txt);
}
</script>

</body>
</html>

当我按下按钮时，输出是，

{lat: 33.53625 , lng:-111.92674}, {lat: 33.51049 , lng:-111.96279}, {lat: 33.50161 , lng:-111.90374},

现在，上面的输出存储在 var txt 中，所以，我把 "txt" 放在了 triangleCoords 的下面的 google api 程序中，

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polygon</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 12,
    center: {lat: 33.53625, lng: -111.92674},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });



 var location =[33.53625,-111.92674,33.51049,-111.96279,33.50161,-111.90374];
var a =[{lat:location[0] , lng: location[1]},{lat: location[2], lng: location[3]},{lat: location[4], lng: location[5]}];


var txt = "";
var n;
var h;
for (x in a) {
    n=2*parseInt(x);
    h=(2*parseInt(x))+1;
    txt += "{lat: "+location[n]+" , lng:"+location[h]+"},"+"\n";
}
    var triangleCoords = [
       txt
    ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35

  });
  bermudaTriangle.setMap(map);
}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
  </body>
</html>

但我没有在地图上获得多边形，但如果我将 txt 替换为其独立输出

，我就能获得多边形输出

var triangleCoords = [
   {lat: 33.53625 , lng:-111.92674}, {lat: 33.51049 , lng:-111.96279}, {lat: 33.50161 , lng:-111.90374},


];

我应该将 txt 转换成其他格式吗？还是我遗漏了什么？

【问题讨论】：

你需要创建一个对象数组，而不是字符串。

标签： javascript html google-maps type-conversion

【解决方案1】：

我可以只发布您需要更改的几行，但您只会复制和粘贴。

你这里的问题是你不知道javascript的基础，甚至是类型基础。

您的 str 变量是 String

typeof str; // "string"

你想要的返回值是

typeof str; // "object" - You shouldn't even call it str, BTW

让我们从头开始

你拥有的第一件事是

var location = [33.53625,-111.92674,33.51049,-111.96279,33.50161,-111.90374];

typeof location 返回object。到目前为止，我们都很好。

那么我们就有了

var a =[{lat:location[0] , lng: location[1]},{lat: location[2], lng: location[3]},{lat: location[4], lng: location[5]}];

重要提示：避免使用这种不具表现力的 var 名称。

此时，typeof a 返回object

a的结构如下

[
    {
        "lat": xxxx,
        "lng": xxxx
    },
    {
        "lat": xxxx,
        "lng": xxxx
    },
    {
        "lat": xxxx,
        "lng": xxxx
    },
]

根据documentation，这正是您的 Google 地图用途所需要的。

路径：类型

所以你可以将a 传递给 Polygon 构造函数

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
  paths: a,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});

bermudaTriangle.setMap(map);

你的错误

在那么接近之后，你开始搞乱字符串。这两行非常不同

var str = '[{"lat":33.44545,"lng":-56.2333}]';
// typeof str -> "string"
var latLngs = [{"lat":33.44545,"lng":-56.2333}];
// typeof latLngs -> "object"

我的建议

1) 始终检查您是否将函数期望的类型作为参数传递。

2) 与 Javascript 控制台成为朋友（按 F12，然后转到 控制台 选项卡）

3) 在学习之前编写代码，不要放弃。

【讨论】：

【解决方案2】：

在数组中使用字符串意味着你得到的结果与：

var triangleCoords = [
   "{lat: 33.53625 , lng:-111.92674},\n {lat: 33.51049 , lng:-111.96279},\n {lat: 33.50161 , lng:-111.90374},\n"
];

这不是一个对象数组，而是一个包含单个字符串的数组。

将实际对象放入数组中，而不是创建对象的字符串格式：

var triangleCoords = [];
for (x in a) {
  n = 2 * x;
  h = 2 * x + 1;
  triangleCoords.push({ lat: location[n], lng: location[h] });
}

但是，最简单的方法是使用您已经创建的对象数组：

var triangleCoords = a;

【讨论】：

非常感谢，我可以使用已经创建的 trianglecoords 数组，但这只是一个实验程序，在实际程序中，我将为 p 个多边形传递 n 个坐标，所以程序将为每个多边形单独坐标并根据坐标数生成其多边形。