从 google-maps 中的标记中删除默认的鼠标悬停工具提示

Question

我创建了一个应用程序来显示标记的信息 Window 弹出窗口，该应用程序工作正常并且弹出窗口正确显示，但唯一的解决方案是与自定义信息一起显示 Window在 mouse-over 下弹出时，带有 html 标签的默认弹出如下所示。

谁能告诉我一些解决方案

我的代码如下

 var infowindow = new google.maps.InfoWindow();

function point(name, lat, long) {
    var self = this;
    self.name = name;

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, long),
        title: name,
        map: map,
        draggable: true
    });

    google.maps.event.addListener(marker, 'mouseover', function () {

        infowindow.setContent(marker.title);
        infowindow.open(map, marker);        
    }.bind(this)); 

    google.maps.event.addListener(marker, 'mouseout', function () {

        infowindow.close();
    }.bind(this));
}

var map = new google.maps.Map(document.getElementById('googleMap'), {
    zoom: 5,
    center: new google.maps.LatLng(55, 11),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var viewModel = {
    points: ko.observableArray([
        new point('<div>Test1<br>Test5</div>', 55, 11),
        new point('Test2', 56, 12),
        new point('Test3', 57, 13)])

};
function addPoint() {
    console.log(viewModel.points().length);
    for (var i = 0; i < viewModel.points().length; i++)
    {
        console.log(i);
        console.log(viewModel.points().marker.title);
    }
    viewModel.points.push(new point('a', 58, 14));
}

ko.applyBindings(viewModel);

Answer 1

您可以手动删除 mouseover 上的元素 title 属性。

尝试改变

google.maps.event.addListener(marker, 'mouseover', function () {

到

google.maps.event.addListener(marker, 'mouseover', function (e) {
    e.ya.target.removeAttribute('title');

还有 Edge，您需要将其更改为：

e.ya.target.parentElement.removeAttribute('title')

JSFiddle Link（Google 地图 API 不工作）

Answer 2

我一直在利用这个线程来解决几乎相同的问题。单击标记时，我能够使 Google 地图 API 在 pop-up 显示中正确显示欧洲重音字形，但鼠标悬停时无法正确呈现相同的编码文本字符串。

所以，在查看了 JSFiddle 中的有用代码示例，并且无法使用建议的技术来删除 'title' 文本之后，我终于明白了 MrUpsidown 在他认为我们时的建议是什么可能只是更改显示为标题的属性的名称。我没有意识到保留的属性 'title' 的定义是 "text to be displayed on hover." 所以，最简单的解决方案是在标记中使用属性例如 'myTitle'选项列表。当没有标题属性时，悬停变成non-event.

Answer 3

您的标记的标题似乎设置为弹出窗口 window 的 html 内容。当您创建标记 object 时，给它一个您希望显示的标题属性（即您所在位置的名称...）

var marker = new google.maps.Marker({
  position: whateverpositionyouset,
  title: whatevertitleyouwant,
  map: map
})

从 google-maps 中的标记中删除默认的鼠标悬停工具提示

removing default mouseover tooltip from marker in google-maps

javascript

tooltip

google-maps-api-3

google-maps-markers

JSFiddle Link（Google 地图 API 不工作）