google-maps - 修改谷歌地图默认路线标题

Question

我正在使用 Google maps 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 的可读性：

1. 我想把这addr部分放在单独的一行上。
2. 我想以loc粗体突出显示部分

由于文本 forthis start_address放置在表td( class="adp-text") 内的 ( ) 中class="adp-placemark"；我认为在and<br/>之间添加一个可以让我得到我想要的换行符；但它不起作用，api 将其转换为. 同样，试图放在部件之前，被翻译成.locaddr<br/><b>loc& lt;b& gt;

我试过用引号和反斜杠等转义标记代码；但找不到一种方法来做我想做的事。有没有办法插入这样的标记以使其通过谷歌代码翻译器？是否有一些较低级别的 CSS 标记可用于完成此操作？

Answer 1

您必须在将元素插入 DOM 后对其进行修改。

1. 分配所需的标记：

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

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

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

3. 设定方向：

   directionsDisplay.setDirections(response);
   

4. 稍等片刻，直到您修改元素：

   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);