如何从数组设置 infoWindow 内容 Google 地图 API

Question

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

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

返回以下内容：

如何防止在信息窗口中打印逗号？

Answer 1

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

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

Answer 2

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

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

will return: ["a","b"];（其中有逗号）。

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

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

proof of concept fiddle

代码片段：

"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>

如何从数组设置 infoWindow 内容 Google 地图 API

How to set infoWindow content from an array Google Maps API

javascript

google-maps-api-3

infowindow