无法添加标记到自定义瓷砖地图 [英] Cant add markers to custom tile map
问题描述
我是Google地图编码新手。我一直试图让自己成为一张使用自定义图像拼贴的地图(魔兽世界之外),我一直在这里遵循指导: http://facepunch.com/showthread.php?t=1184658
我收到了地图显示以及类似的工作。但现在我试图添加标记,他们不会显示出来,任何人都可以帮助吗?
继承我的代码:(没有标记代码)
<!DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =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-typecontent =text / html; charset = utf-8/>
< title>魔兽世界的Google地图< / title>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script>
函数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 =瓷砖坐标图类型;
var map;
var CustomMapType = new CustomMapType();
函数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_canvasstyle =background:#1B2D33;>< / div>
< / body>
< / html>
请参阅有关添加标记的文档,
将标记添加到地图,请使用'map'属性
var marker = new google.maps.Marker({
position:map.getCenter(),
map:map,
title:Hello World!
});
程式码片段:
函数初始化(){风险的MapOptions = {MINZOOM:2,MAXZOOM:7,isPng:真,MapTypeControl中:假,将streetViewControl :假,中心:新google.maps.LatLng(0,0),缩放:3,的mapTypeControlOptions:{mapTypeIds:[ '自定义',google.maps.MapTypeId.ROADMAP],样式:google.maps.MapTypeControlStyle.DROPDOWN_MENU} }; map = new google.maps.Map(document.getElementById(map_canvas),mapOptions); map.mapTypes.set('custom',CustomMapType); map.setMapTypeId(自定义); //要将标记添加到地图,请使用'map'属性var marker = new google.maps.Marker({position:map.getCenter(),map:map,title:Hello World!});} google.maps.event.addDomListener(窗口, '负载',初始化);函数CustomMapType(){} CustomMapType.prototype.tileSize =新为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 +')'; 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 / javascriptsrc =http://maps.googleapis.com/maps/api/js>< / script>< div id =map_canvasstyle =背景:#1B2D33;>< / div>
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 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>
这篇关于无法添加标记到自定义瓷砖地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!