如何通过数组Google Maps API设置infoWindow内容

问题描述

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

返回以下内容：

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

解决方法

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

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

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

代码段：

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

google-maps-api-3 infowindow javascript