Question

首先要说我是一个javascript新手......

我从stackoverflow.com上的以下问题中借用了一些代码示例：

Google Maps JS API v3 - Simple Multiple Marker Example with Custom Markers

问题在于，当我在infoWindow中添加了一些样式时，悬停显示了所有的html垃圾：我太新了，无法上传图片，但这里有一个可以显示问题的工作链接。

link：http://www.conleym.com/map/google_maps_code_10_zoom_working.html

所以我的问题是 - 是否有一种简单的方法来消除悬停上的样式信息，或者是否有一种方法可以禁用悬停以便用户看不到它？

这是我用过的一个例子：

['<a style="font-family: Arial" href="http://www.mfah.org/" target="_blank"><b>The Holocaust Museum</b></a><br><span style="font-size: 12px; font-family: Arial;">1001 Bissonnet Street<br> Houston, TX 77005<br>(713) 639-7300<br></span>', 29.725472,-95.386033, 4, 'http://www.conleym.com/map/icons/star-3.png'],

提前感谢您的帮助。

Answer 1

createMarker功能实际上是为带有纯文本标题的标记设计的。我建议修改该功能以容纳您拥有的其他信息，即：链接（URL），地址和电话。< / p>

不要对信息窗口的myTitle和悬停文本（标题）使用相同的contentString，而应根据提供的标题在函数中创建HTML标记，链接，地址和电话。 createMarker函数变为：

function createMarker(latlng, myTitle, myLink, myAddress, myPhone, myNum, myIcon) {
    var contentString = '<a style="font-family: Arial" href="' +
        myLink + '" target="_blank">' + myTitle +
        '</a><br><span style="font-size: 12px; font-family: Arial;">ADDRESS<br> ' +
        myAddress + '<br>PHONE<br>' + myPhone + '</span>';

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: myIcon,
        zIndex: Math.round(latlng.lat() * -100000) << 5,
        title: myTitle,
    });

    // ...

您必须更新对函数的调用以传递正确的参数：

createMarker(new google.maps.LatLng(locations[i][4], locations[i][5]), locations[i][0], locations[i][1], locations[i][2], locations[i][3], locations[i][6], locations[i][7]);

location[i][0]是该位置的名称/标题
location[i][1]是链接
location[i][2]是地址
location[i][3]是电话号码
location[i][4]是位置的纬度
location[i][5]是位置的经度
location[i][6]是myNum（实际上没有在任何地方使用）
location[i][7]是标记图标的网址

现在，您可以更清晰地对数据源进行编码。例如：

var locations = [    

//====================== ZONE 1 MUSEUMS  ==========================
//THE MENIL COLLECTION  
    ['The Menil Collection', 'http://www.mfah.org/', 'Houston TX 77006', '(713) 639-7300', 29.737593,-95.398525, 1, 'http://www.conleym.com/map/icons/world.png'],

//ROTHKO CHAPEL 
    ['Rothko Chapel', 'http://www.mfah.org/', 'Houston, TX 77006', '(713) 639-7300', 29.737822,-95.395725, 2, 'http://www.conleym.com/map/icons/world.png'],

//HOUSTON CENTER for PHOTOGRAPY 
    ['Houston Center for Photography', 'http://www.mfah.org/', 'Houston, TX 77006', '(713) 639-7300', 29.738606,-95.397179, 3, 'http://www.conleym.com/map/icons/world.png'],


// and so on...

];

演示： Before和After

Answer 2

HTML元素（或标记）的title属性不支持HTML标记。您不应对标题和InfoWindow HTML内容使用相同的字符串。向数组中添加另一个元素，将标题放在那里以便在标记的title属性中使用，然后将当前的HTML放在InfoWindow中。

function createMarker(latlng, myTitle, myNum, myIcon) {
  var contentString = myTitle;        <-------------------- this appears in the InfoWindow
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: myIcon,
    zIndex: Math.round(latlng.lat() * -100000) << 5,
    title: myTitle,    <------------------------------------------- this is the tooltip
                                                                    appears on mouseover
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });

  markerArray.push(marker); //push local var marker into global array
}  <---------------------------------------------------------this close "}" is missing

您的createMarker函数中似乎包含一堆垃圾（多边形定义），您实际上只想添加一次，而不是每次添加标记时都添加。

谷歌地图API v3多标记infowindow - 悬停html垃圾

2 个答案: