我刚开始为Google地图编码。我一直试图使用自定义图像图块(Out of World of Warcraft)制作自己的地图,我一直在这里关注指南:http://facepunch.com/showthread.php?t=1184658
我得到了地图显示和所有类似的工作。但现在我正在尝试添加标记,它们不会出现,任何人都可以帮忙吗?
继承我的代码:(没有标记代码。)
<!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>
答案 0 :(得分:0)
参见documentation on adding Markers, 要将标记添加到地图,请使用“地图”属性
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: "Hello World!"
});
代码段
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>