Question

我已将自定义控制器添加到谷歌地图API。自定义控制器中的一个div应该是可点击的。我添加了cursor:pointer作为样式。它适用于Firefox，但不适用于chrome。在Chrome浏览器中，它会显示手形图标，但会单击操作没有用。

这是我添加到html文件中的代码，用于将html添加到自定义控制器。

controlText.innerHTML = '<div id="newid" class="myclass" style="width:380px; margin-left:40px; margin-bottom:20px;">Click here to proceed</div></div>';

我已添加到click事件列表器中，如下所示。

    map.controls[google.maps.ControlPosition.BOTTOM_LEFT].clear();
    map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].clear();
    var inputfieldControlDiv = document.createElement('div');
    var inputfieldControl = new TextfieldControl(inputfieldControlDiv, map);
    map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(inputfieldControlDiv);

css文件

.myclass{
cursor:pointer;
}

Answer 1

在Mozzila，Opera，IE11，Chrome中进行测试并且它可以正常工作（它总是显示您班级中指定的游标）

这是小提琴：https://jsfiddle.net/eugensunic/kphe5fbL/10/

我已经包含了您的以下代码：controlText.innerHTML = '<div id="newid" class="myclass" style="width:380px; margin-left:40px; margin-bottom:20px;">Click here to proceed</div></div>';以及清算，我相信它们不是必需的。

以下是小提琴中的完整代码JS：

var map;
var london = new google.maps.LatLng(51.508742, -0.120850);
function TextfieldControl(controlDiv, map) {

    var controlUI = document.createElement('div');
    controlDiv.appendChild(controlUI);
    var controlText = document.createElement('div');
    controlText.innerHTML = '<div id="newid" class="myclass" onclick="alert()"style="width:380px; margin-left:40px; margin-bottom:20px;">Click here to proceed</div></div>';
    controlUI.appendChild(controlText);
}

function initialize() {
    var mapDiv = document.getElementById('googleMap');
    var myOptions = {
        zoom: 12,
        center: london,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(mapDiv, myOptions);

    var homeControlDiv = document.createElement('div');
    var homeControl = new TextfieldControl(homeControlDiv, map);

    map.controls[google.maps.ControlPosition.BOTTOM_LEFT].clear();  
    map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].clear();
    map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(homeControlDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);

当然，光标将切换到值＆＃34;默认＆＃34;在某些时候因为你的边距css设置为一些像素。

修改

唯一可能阻碍此问题的另一个问题是您打开了开发人员工具标签，这已在此stackoverflow线程中解决：

url：mouse hover on anchor tag does not display pointer cursor. Behavior observed on Chrome, works fine on IE 9?

如果您仍有问题，那么您应该透露 TestfieldControl 功能。

div样式光标指针在chrome中不起作用

1 个答案: