javascript - 更改 Google map 的 RichMarker 光标

标签 javascript jquery css google-maps

解释

出于某种原因,当使用 RichMarker 时(所以我可以使用 Font Awesome 的字体),不允许更改光标。正如您在下面看到的,当将鼠标悬停在 Google map 的标记上时,光标会如代码所示发生变化,但 RichMarker 的标记不会发生任何变化。我做错了什么吗?

代码

你也可以在JSFiddle中看到它.

function initialize() {
    var myLatLng1 = new google.maps.LatLng(37.773293, -122.469468);
    var myLatLng2 = new google.maps.LatLng(37.774548, -122.467054);
    
    var mapOptions = {
        zoom: 15,
        center: myLatLng1
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    // First Marker
    var marker = new RichMarker({
        position: myLatLng1,
        map: map,
        flat:true,
        content: '<i class="fa fa-map-marker fa-4x"></i>',
        cursor: 'default'
    });
    
    // Second Marker
    var marker = new google.maps.Marker({
        position: myLatLng2,
        map: map,
        cursor: 'default'
    });
}

google.maps.event.addDomListener(window, "load", initialize);
#map-canvas {
  width: 500px;
  height: 400px;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    </head>
    <body>
        <div id="map-canvas"></div>
        
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
        <script src="https://rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script>
    </body>
</html>

提前致谢,
路易斯。

最佳答案

根据 Hua Trung 的建议在上面的评论中,我需要更改 richmarker.js .

因为我不希望标记是可拖动的,所以我可以删除它的所有内容。

所以我:

  • 查找设置光标(第 428 行);
  • 删除了第 439 行到第 460 行的所有内容;
  • var cursor = '';(第 438 行)更改为 var cursor = 'pointer';(或您偏好的光标)。

现在如下(来自第427行)

/**
 * Sets the cursor.
 *
 * @param {string} whichCursor What cursor to show.
 * @private
 */
RichMarker.prototype.setCursor_ = function(whichCursor) {
  if (!this.ready_) {
    return;
  }

  var cursor = 'pointer';

  if (this.markerWrapper_.style.cursor != cursor) {
    this.markerWrapper_.style.cursor = cursor;
  }
};

关于javascript - 更改 Google map 的 RichMarker 光标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43018509/

相关文章:

javascript - 如果选择了特定商店,则当天日期不可用

javascript - 水平滚动 - 就像 github

javascript - 使用数据属性将鼠标悬停在链接上时更改(和淡入/淡出)图像

JQuery:检查页面上的任何下拉列表当前是否选择了特定值?

jquery - 如何隐藏真棒字体图标以外的文本

html - 2 种类型的文本在同一行

javascript - 在没有 jquery 的较小 div 中滚动溢出 div 的可见部分

javascript - JQuery/JavaScript 键盘事件

javascript - 部署后图像不显示

javascript - Angular 防止将模型设置为无效时未定义