如何从数组 Google Maps API 设置 infoWindow 内容答案

【问题标题】：How to set infoWindow content from an array Google Maps API如何从数组 Google Maps API 设置 infoWindow 内容
【发布时间】：2021-01-15 04:45:14
【问题描述】：

我正在尝试从数组中填充信息窗口内容：

var arrayTest = ["a", "b"];
infoWindow.setContent("<p>Header</p>" + arrayTest.map(function (val) { return "<p>" + val + "</p>" }));
infoWindow.open(map, marker);

返回如下：

如何防止逗号在 infoWindow 中打印？

【问题讨论】：

标签： javascript google-maps-api-3 infowindow

【解决方案1】：

您可以使用.join() 方法来更改连接默认字符，即逗号

var arrayTest = ["a", "b"];
infoWindow.setContent("<p>Header</p>" + arrayTest.map(function (val) { return "<p>" + val + "</p>" }).join(""));
infoWindow.open(map, marker);

【讨论】：

【解决方案2】：

Array.map() 返回一个数组。所以对于你的例子：

arrayTest.map(function (val) { return "<p>" + val + "</p>" })

将返回：["a","b"];（其中包含逗号）。

您可以使用Array.join() 将该数组组合成一个不带逗号的字符串："Headerab"

arrayTest.map(function (val) { return "<p>" + val + "</p>" }).join("")

proof of concept fiddle

代码 sn-p：

"use strict";

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = {
    lat: -25.363,
    lng: 131.044,
  };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });

const infoWindow = new google.maps.InfoWindow();
var arrayTest = ["a", "b"];
infoWindow.setContent("<p>Header</p>" + arrayTest.map(function (val) { return "<p>" + val + "</p>" }).join(""));
const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });
infoWindow.open(map, marker);
marker.addListener("click", () => {
    infoWindow.open(map, marker);
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Info Windows</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

【讨论】：