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版本互相踩着。
您还要加载Maps API的三个副本：版本3的两个副本和已弃用的版本2 API的副本。

现在回答你的问题：

使用闭包为标记循环的每次迭代保存变量。您只需在每次迭代中调用一个函数即可完成此操作。
使用this时，不要在致电infowindow.open()时使用marker。（this和marker在此上下文中可能相同，但使用marker表示一致性。）
infowindow的.close()方法不带任何参数。
创建标记时不要设置tooltip属性。可以工作，但没有记录您可以以这种方式添加自己的属性。相反，只需使用tooltip的本地变量或参数。
我会在添加事件监听器之前创建infowindow。这实际上可以按任意顺序工作（因为事件监听器是异步的），但看起来最好先看到infowindow。

因此，请将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();
    });
}

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

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

Answer 2

使用以下代码：

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

<强> EDIETD：

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

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

Answer 3

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

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

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

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

3 个答案: