如何从数组 Google Maps API 设置 infoWindow 内容
[英]How to set infoWindow content from an array Google Maps API
问题描述
I am trying to populate infowindow content from an array:
我正在尝试从数组填充信息窗口内容：
var arrayTest = ["a", "b"];
infoWindow.setContent("<p>Header</p>" + arrayTest.map(function (val) { return "<p>" + val + "</p>" }));
infoWindow.open(map, marker);
The following is returned:返回以下内容：
How do I prevent the comma from being printed within the infoWindow?如何防止在 infoWindow 中打印逗号？
2 个解决方案
解决方案1
1 已采纳 2020-09-29 14:46:50
You can use the .join() method to change your concatenation default char that is the comma您可以使用.join()方法来更改您的连接默认字符，即逗号
var arrayTest = ["a", "b"];
infoWindow.setContent("<p>Header</p>" + arrayTest.map(function (val) { return "<p>" + val + "</p>" }).join(""));
infoWindow.open(map, marker);
解决方案2
0 2020-09-29 14:56:35
Array.map() returns an array. Array.map()返回一个数组。 So for your example:所以对于你的例子：
arrayTest.map(function (val) { return "<p>" + val + "</p>" })
will return: ["<p>a</p>","<p>b</p>"];将返回： ["<p>a</p>","<p>b</p>"]; (with the comma in it). （其中有逗号）。
You can use Array.join() to combine that array into a string without the comma: "<p>Header</p><p>a</p><p>b</p>"您可以使用Array.join()将该数组组合成一个不带逗号的字符串： "<p>Header</p><p>a</p><p>b</p>"
arrayTest.map(function (val) { return "<p>" + val + "</p>" }).join("")
proof of concept fiddle概念证明小提琴
code snippet:代码片段：
"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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.