Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
301 views
in Technique[技术] by (71.8m points)

javascript - Cant add markers to custom tile map

I'm new to coding for Google Maps. Ive been trying to make myself a map using custom image tiles (Out of World of Warcraft) and i've been following a guide here: http://facepunch.com/showthread.php?t=1184658

Ive got the map showing and everything like that working. But now I'm trying to add markers and they won't show up, Can anyone help?

Heres my code: (Without the marker code in there.)

<!DOCTYPE html>
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100%; z-index: 0;}
      #gmnoprint {width: auto;}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>Google Map of the WoW World</title> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function CustomMapType() {
}
CustomMapType.prototype.tileSize = new google.maps.Size(256,256);
CustomMapType.prototype.maxZoom = 7;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('DIV');
    var baseURL = 'http://d1m6g5gl70bc4l.cloudfront.net/';
    baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.backgroundColor = '#1B2D33';
    div.style.backgroundImage = 'url(' + baseURL + ')';
    return div;
};

CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var CustomMapType = new CustomMapType();
function initialize() {
  var mapOptions = {
      minZoom: 2,
    maxZoom: 7,
    isPng: true,
      mapTypeControl: false,
      streetViewControl: false,
        center: new google.maps.LatLng(0,0),     
      zoom: 3,
    mapTypeControlOptions: {
      mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }

  };
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
map.mapTypes.set('custom',CustomMapType);
map.setMapTypeId('custom');
}
</script>
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="background: #1B2D33;"></div> 
</body>
</html> 
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

See the documentation on adding Markers, to add the marker to the map, use the 'map' property

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: "Hello World!"
  });

code snippet:

function initialize() {
  var mapOptions = {
    minZoom: 2,
    maxZoom: 7,
    isPng: true,
    mapTypeControl: false,
    streetViewControl: false,
    center: new google.maps.LatLng(0, 0),
    zoom: 3,
    mapTypeControlOptions: {
      mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }

  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  map.mapTypes.set('custom', CustomMapType);
  map.setMapTypeId('custom');

  // To add the marker to the map, use the 'map' property
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: "Hello World!"
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

function CustomMapType() {}
CustomMapType.prototype.tileSize = new google.maps.Size(256, 256);
CustomMapType.prototype.maxZoom = 7;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('DIV');
  var baseURL = 'http://d1m6g5gl70bc4l.cloudfront.net/';
  baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.backgroundColor = '#1B2D33';
  div.style.backgroundImage = 'url(' + baseURL + ')';
  return div;
};

CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var CustomMapType = new CustomMapType();
html {
  height: 100%
}
body {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#map_canvas {
  height: 100%;
  z-index: 0;
}
#gmnoprint {
  width: auto;
}
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="background: #1B2D33;"></div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...