Question

我正在使用Google地图V3 JavaScript API，而我目前正在使用默认路线格式化（因为这是将地图图钉和步骤图标集成到列表中的最简单方法）。我正在设置为每个“地址”显示的文本，例如：

var loc = 'The Old Ballpark Bar and Lounge';
var addr = '1234 Main st. Chicago, IL.';
...
route.legs[0].start_address = loc + ' - ' + addr;

我想以两种方式增强此start_address的可读性：

我想将addr部分放在一个单独的行上。
我想以粗体

loc

由于this start_address的文字放在表格中td（class="adp-text"）（class="adp-placemark"）;我认为在<br/>和loc之间加addr可以获得我想要的换行符;但它不起作用，api将其转换为<br/>。同样，尝试将<b>放在loc部分之前，会转换为& lt;b& gt;。

我尝试使用引号和反斜杠等来转义标记代码;但找不到办法做我想做的事。有没有办法插入这样的标记，以使其通过谷歌代码翻译？是否有一些可用于实现此目标的低级CSS标记？

Answer 1

您必须在将元素插入DOM后修改它们。

分配所需的标记：

route.legs[0].start_address = '<div style="font-weight:bold">'+ loc + '</div>' + addr;

隐藏面板（以避免不良影响）

//directionsDisplay is the google.maps.DirectionsRenderer-instance
directionsDisplay.getPanel().style.visibility='hidden';

设定方向：

directionsDisplay.setDirections(response);

等一下，直到你修改元素：

setTimeout(function(){
//fetch the elements
var nodes=directionsDisplay.getPanel().querySelectorAll('td.adp-text');
for(var n=0;n<nodes.length;++n){
  //assign the text-content of the element to the innerHTML-property
  nodes[n].innerHTML=nodes[n].firstChild.data;
}
//show the panel
directionsDisplay.getPanel().style.visibility='visible';
},100);

修改google-maps默认路线标题

1 个答案: