无法添加标记到自定义瓷砖地图 [英] 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！
}）;
程式码片段：
<预类= 片段码-JS郎-JS prettyprint-越权>
函数初始化（）{风险的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屋！
查看全文
