Question

我知道我可以使用工具提示制作一个标记，显示“SOMETHING”，如下所示：

marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lon),
        map: map,
        draggable: true,
        title:"SOMETHING",
        icon: '/public/markers-map/male-2.png'
    });

我想用圆圈做同样的事情，但标题不起作用。

new google.maps.Circle({
                center: new google.maps.LatLng(lat,lon),
                radius: 20,
                strokeColor: "blue",
                strokeOpacity: 1,
                title:"SOMETHING",
                strokeWeight: 1,
                fillColor: "blue",
                fillOpacity: 1,
                map: map
            });

它打印圆圈但不显示消息“SOMETHING”。

我该怎么办？是否还有其他财产可以获得它？

提前致谢。

Answer 1

工具提示是通过DOM元素的原生title - 属性创建的，但他没有提供任何方法来访问包含圆圈的DOMElement。

可能的解决方法可能是使用map-div的title-attribute（将其设置为onmouseover并将其删除onmouseout）

        //circle is the google.maps.Circle-instance
        google.maps.event.addListener(circle,'mouseover',function(){
             this.getMap().getDiv().setAttribute('title',this.get('title'));});

        google.maps.event.addListener(circle,'mouseout',function(){
             this.getMap().getDiv().removeAttribute('title');});

Answer 2

您也可以使用InfoWindow而不是html title属性，因为标题可能不会始终显示在鼠标悬停上。 InfoWindow看起来很不错。

var infowindow = new google.maps.InfoWindow({});
var marker = new google.maps.Marker({
    map: map
});

然后使用相同的鼠标悬停事件机制来显示InfoWindow：

google.maps.event.addListener(circle, 'mouseover', function () {
 if (typeof this.title !== "undefined") {
    marker.setPosition(this.getCenter()); // get circle's center
    infowindow.setContent("<b>" + this.title + "</b>"); // set content
    infowindow.open(map, marker); // open at marker's location
    marker.setVisible(false); // hide the marker
   }
});

google.maps.event.addListener(circle, 'mouseout', function () {
 infowindow.close();
});

Answer 3

我们也可以直接在google.maps.Circle实例上添加事件监听器。

代码示例：

//circle is the google.maps.Circle-instance
circle.addListener('mouseover',function(){
    this.getMap().getDiv().setAttribute('title',this.get('title'));
});

circle.addListener('mouseout',function(){
    this.getMap().getDiv().removeAttribute('title');
});

刚写了另类！

谷歌地图，在圆圈上显示工具提示

3 个答案: