1

将指针悬停在谷歌地图中时，我添加了用于显示工具提示的代码。它正在显示工具提示，但内容是“未定义的”。如何将与指针相关的相应内容放入工具提示框中。代码为：

function initialize() {

      var myOptions = {
        zoom: 11,
        center: new google.maps.LatLng(29.7,-95.4),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("salon_map"), myOptions);

      var locations = [
         __newmapdetls__
      ];

      for (var i = 0; i < locations.length; i++) {
        var location = locations[i];
        var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
        new google.maps.Size(20, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));


        var myLatLng = new google.maps.LatLng(location[1], location[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: location[0],
            zIndex: location[3],
            tooltip:"testinggg"+i
        });

        google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow1.open(map, this);
        });
        google.maps.event.addListener(marker, 'mouseout', function() {
            infowindow1.close(map, this);
        });
        var infowindow1 = new google.maps.InfoWindow({
            content:  "'"+this.tooltip+"'"
        });
      }
    }

网址也是： http: //myshopsalon.com/find-a-shop-salon

4

3 回答 3

2

在查看您的页面源代码时，我注意到了几件事：

  • 您的页面正在加载 jQuery 1.10.1 和 1.7.2。但它没有使用noConflict(). 所以这两个jQuery版本是互相踩踏的。
  • 您还加载了三个Maps API 副本：两个版本 3的副本和一个已弃用的版本 2 API 的副本。

现在回答你的问题：

  • 使用闭包为标记循环的每次迭代保存变量。您可以通过在每次迭代中简单地调用一个函数来做到这一点。
  • this不要在调用时使用，而是infowindow.open()使用marker. （this并且marker在这种情况下可能相同，但marker用于一致性。）
  • 信息窗口的.close()方法不带任何参数。
  • tooltip创建标记时不要设置属性。这可能有效，但没有记录您可以以这种方式添加自己的属性。相反，只需使用局部变量或参数tooltip。
  • 我会在添加事件侦听器之前创建信息窗口。这实际上可以按任一顺序正常工作（因为事件侦听器是异步的），但最好先查看创建的信息窗口。

因此，将for循环更改为：

for (var i = 0; i < locations.length; i++) {
    addMarker( locations[i], "testinggg" + i );
}

function addMarker( location, tooltip ) {
    var image = new google.maps.MarkerImage(
        "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
        new google.maps.Size(20, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34)
    );

    var myLatLng = new google.maps.LatLng(location[1], location[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: location[0],
        zIndex: location[3]
    });


    var infowindow = new google.maps.InfoWindow({
        content:  "'" + tooltip + "'"
    });
    google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.open(map, marker);
    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();
    });
}

也就是说，当您打开信息窗口以响应将鼠标移到标记上时，您可能不喜欢得到的结果。如果标记靠近窗口顶部怎么办？页面将立即移动以使信息窗口适合屏幕，现在标记将不再位于鼠标下方。

title创建标记时，您已经在设置属性。当鼠标悬停在标记上时，这应该会导致出现正常的浏览器工具提示，并且不会像信息窗口那样导致地图移动。有什么理由不只使用该工具提示而不是信息窗口？您可以删除所有信息窗口代码，或者像往常一样让信息窗口在单击时打开。

于 2013-10-01T07:37:02.700 回答
1

使用以下代码：

var infowindow1 = new google.maps.InfoWindow({
    content:  "'"+marker.tooltip+"'"
});

编辑：

 var contentString = "testinggg"+i;
 var infowindow1[i] = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
     position: myLatLng,
     map: map,
     icon: image,
     title: location[0],
     zIndex: location[3],
     tooltip:"testinggg"+i
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
     infowindow1[i].open(map, marker);
  });
  google.maps.event.addListener(marker, 'mouseout', function() {
    infowindow1[i].close(map, marker);
  });

您无法在信息窗口中获取标记的属性。所以你需要在其他变量中定义内容。

于 2013-10-01T06:47:34.553 回答
1

设置信息窗口的内容 onmouseover（您可以在那里访问特定标记的工具提示属性）

 google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow1.setContent(this.tooltip);
        infowindow1.open(map, this);
    });

移动到循环外的初始化infowindow1并将参数留空。

于 2013-10-01T07:54:02.780 回答