0

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

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

Google Maps JS API v3 - 带有自定义标记的简单多标记示例

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

链接： 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'],

提前感谢您的帮助。

4

2 回答 2

1

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

您应该根据提供的标题、链接、地址和电话在函数内创建 HTML 标记，而不是对信息窗口和悬停文本（标题）使用相同myTitle的标记。函数变为contentString：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]是标记图标的 URL

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

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

];

演示： 之前和之后

于 2012-12-05T18:47:10.083 回答
0

HTML 元素（或标记）的 title 属性不支持 HTML 标记。您不应该对标题和 InfoWindow HTML 内容使用相同的字符串。将另一个元素添加到您的数组中，将标题放入其中以用于标记的标题属性，然后将您当前拥有的 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 函数中似乎包含一堆垃圾（多边形定义），您真的只想添加一次，而不是每次添加标记。

于 2012-12-05T18:49:16.393 回答