Question

我有这个问题，当地图不可见时，我可以在谷歌地图上绘制（标记和折线）吗？我使用谷歌地图，但我想看到地图上只有标记，我不想看到地图......

Answer 1

使用空白图块创建一个mapType。

开始

代码段

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the BlankMapType displays blank gray tiles coordinates.
 */

/**
 * @constructor
 * @implements {google.maps.MapType}
 */
function BlankMapType() {}

BlankMapType.prototype.tileSize = new google.maps.Size(256, 256);
BlankMapType.prototype.maxZoom = 19;

BlankMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  // div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '0px';
  div.style.borderColor = '#AAAAAA';
  div.style.backgroundColor = '#E5E3DF';
  return div;
};

BlankMapType.prototype.name = 'Blank';
BlankMapType.prototype.alt = 'Blank Map Type';

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var blankMapType = new BlankMapType();

function initialize() {
    var mapOptions = {
      zoom: 10,
      center: chicago,
      streetViewControl: false,
      mapTypeId: 'blank',
      mapTypeControlOptions: {
        mapTypeIds: ['blank', google.maps.MapTypeId.ROADMAP],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      }
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    google.maps.event.addListener(map, 'maptypeid_changed', function() {
      var showStreetViewControl = map.getMapTypeId() != 'blank';
      map.setOptions({
        'streetViewControl': showStreetViewControl
      });
    });

    // Now attach the coordinate map type to the map's registry
    map.mapTypes.set('blank', blankMapType);
    setMarkers(map, beaches);
  }
  /**
   * Data for the markers consisting of a name, a LatLng and a zIndex for
   * the order in which these markers should display on top of each
   * other.
   */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  var bounds = new google.maps.LatLngBounds();
  var polyPath = [];
  // Add markers to the map
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    polyPath.push(myLatLng);
    var marker = new google.maps.Marker({
      position: myLatLng,
      title: beach[0],
      map: map
    });
    bounds.extend(myLatLng);
  }
  path = polyPath.sort(sortFunc);
  var poly = new google.maps.Polyline({
    map: map,
    path: polyPath
  });
  map.fitBounds(bounds);
}

function sortFunc(a, b) {
  if (a.lat() > b.lat()) return 1;
  if (a.lat() < b.lat()) return -1;
  return 0;
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

我想只在谷歌地图上看到标记而不是地图

1 个答案: