【问题标题】:removing default mouseover tooltip from marker in google-maps从谷歌地图中的标记中删除默认的鼠标悬停工具提示
【发布时间】:2015-03-16 01:34:51
【问题描述】:

我创建了一个应用程序,用于显示标记的信息窗口弹出窗口,该应用程序工作正常并且弹出窗口显示正确,但唯一的解决方案是在鼠标悬停时与自定义信息窗口弹出窗口一起,默认弹出窗口html标签如下图所示。

JSFiddle

谁能告诉我一些解决方法

我的代码如下所示

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

【问题讨论】:

  • 为什么不简单地创建/使用除title 之外的另一个属性作为标记?
  • 是的,使用另一个属性是要走的路!

标签: javascript google-maps-api-3 tooltip google-maps-markers


【解决方案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(谷歌地图 API 不工作)

【讨论】:

  • @AlexMan 我认为您的意思是在您的其他问题上添加此评论。祝你好运!
  • 除了我对这个问题的评论之外,还有记录在案的方法来设置标记标题。
【解决方案2】:

我一直在利用这个线程来解决几乎相同的问题。当单击标记时,我可以让 Google Maps API 在弹出式显示中正确显示欧洲重音字形,但鼠标悬停时未正确呈现相同的编码文本字符串。

因此,在查看了 JSFiddle 中有用的代码示例之后,并且无法使用该建议的技术来删除“标题”文本,我终于明白了 MrUpsidown 在他认为我们可以更改显示为标题的属性的名称。我没有意识到保留属性“标题”的定义是“悬停时显示的文本”。因此,最简单的解决方案是在标记选项列表中使用诸如“myTitle”之类的属性。当没有 title 属性时,悬停变成非事件。

【讨论】:

    【解决方案3】:

    标记的标题似乎设置为弹出窗口的 html 内容。 当你创建标记对象时,给它一个你想要显示的标题属性(即你的位置的名称......)

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

    【讨论】:

      猜你喜欢
      • 2011-02-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-01-02
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多