Question

我制作了以下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”放在了threeCoord的以下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转换为其他格式吗？还是我错过了什么？

Answer 1

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

相同

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;

Answer 2

我可以发布你需要更改的几行，但除了复制和粘贴之外你什么都不会学习。

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

您的str var是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地图目的。

路径：输入＆lt; Array LatLngLiteral＆gt;

因此，您可以将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 个答案:

让我们从头开始

你的错误

我的推荐