javascript - 工具提示内容未定义 - 谷歌地图

Question

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

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

Answer 1

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

• 您的页面正在加载 jQuery 1.10.1 和 1.7.2。但它没有使用 noConflict()。所以这两个 jQuery 版本互相踩着对方。
• 您还加载了 map API 的三个副本:版本 3 的两个副本和已弃用的版本 2 API 的副本。

现在回答你的问题:

• 使用闭包为标记循环的每次迭代保存变量。您只需在每次迭代中调用一个函数即可完成此操作。
• 在调用 infowindow.open() 时不要使用 this，而是使用 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 属性。当鼠标悬停在标记上时，这应该会导致出现正常的浏览器工具提示，并且不会像信息窗口那样导致 map 移动。有什么理由不只使用该工具提示而不是信息窗口吗？您可以删除所有信息窗口代码，或者像往常一样让信息窗口在单击时打开。