作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我只是想简单地显示一个标记。我使用 Google 的示例作为指南,因为这是我第一次使用 Google Maps API。我找不到以下代码的任何语法问题。为什么它不加载标记?
<!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 Floor Plan</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 = 4;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
var baseURL = 'C:/Temp';
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 myLatlng = new google.maps.LatLng(65, -56);
var mapOptions = {
minZoom: 0,
maxZoom: 4,
isPng: true,
mapTypeControl: false,
streetViewControl: false,
center: new google.maps.LatLng(65.07,-56.08),
zoom: 3,
mapTypeControlOptions: {
mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World'
});
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
map.mapTypes.set('custom',CustomMapType);
map.setMapTypeId('custom');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="background: #1B2D33;"></div>
</body>
</html>
最佳答案
您的 map 在创建 marker
时未初始化:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World'
});
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
所以,你必须先创建map
,然后再使用它:
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World'
});
或在初始化 map 后在标记上调用 setMap:
var marker = new google.maps.Marker({
position: myLatlng,
title: 'Hello World'
});
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
marker.setMap(map);
关于javascript - 谷歌地图 API 标记不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24767919/
leaflet:一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档: https://leafletjs.cn/reference.html 官网(英文): ht
我是一名优秀的程序员,十分优秀!