更改DrawingManager默认光标

时间:2015-12-28 11:00:14

标签: javascript google-maps-api-3

有没有办法更改默认的DrawingManager鼠标光标?从默认十字准线到自定义。

1 个答案:

答案 0 :(得分:3)

通过API无法实现,但目前光标将通过地图内div的style-attribute设置,因此可以选择特定的div并覆盖样式。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    }
  });
  drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map div[style*='crosshair'] {
  cursor: url("https://i.stack.imgur.com/mA4e2.jpg?s=48&g=1")24 24, crosshair !important;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&v=3"></script>
<div id="map"></div>