javascript Google Maps v3 - 标记不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17204653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps v3 - Markers not displaying
提问by Slinky
I am trying to place multiple markers on a Google Map (API v3). I looked at the Google docs and also this thread. The map draws and centers to the init point but no markers are showing on the map.
我正在尝试在 Google 地图（API v3）上放置多个标记。我查看了 Google 文档以及此线程。地图绘制并以初始点为中心，但地图上未显示任何标记。
Firebug is not reporting any errors.
Firebug 没有报告任何错误。
Here is the JS
这是JS
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(41.056466,-85.3312009),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
//Add 1st marker
var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709);
var marker_0 = new google.maps.Marker({
position: Latlng_0,
title:"0"});
marker_0.setMap(map);
//Add 2nd marker
var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708);
var marker_1 = new google.maps.Marker({
position: Latlng_1,
title:"1"});
marker_1.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thanks for looking!
感谢您的关注！
回答by Rafael Oltra
The reason the markers are not showing up is because that part of the code is getting executed beforethe load event gets fired and the initialize method gets invoked - at that point your map variable is already created but is still null.
标记未显示的原因是因为在触发加载事件并调用 initialize 方法之前执行了该部分代码- 那时您的地图变量已经创建但仍为空。
try adding the code to add the markers inside the initialize method
尝试添加代码以在 initialize 方法中添加标记
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(41.056466,-85.3312009),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
// Add 1st marker
var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709);
var marker_0 = new google.maps.Marker(
{
position: Latlng_0,
title:"0"
}
);
marker_0.setMap(map);
//Add 2nd marker
var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708);
var marker_1 = new google.maps.Marker(
{
position: Latlng_1,
title:"1"
}
);
marker_1.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
see this jsfiddle here where the markers are showing up http://jsfiddle.net/KvugB/
在此处查看标记出现的 jsfiddle http://jsfiddle.net/KvugB/
回答by Slinky
I use this code. I hope it helps you:
我用这个代码。希望对你有帮助：
(function() {
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(41.056466, -85.3312009),
disableDefaultUI: false,
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
// Creating the JSON data
var json = [
{
"title": "Title 1",
"lat": 41.057814980291,
"lng": -85.329851919709,
"description": ""
},
{
"title": "Title 2",
"lat": 41.057814981000,
"lng": -85.8048,
"description": ""
},
]
var styles = [
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#0077bb" },
{ "lightness": 70 }
]
},{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "saturation": -100 },
{ "color": "#699e6b" },
{ "lightness": 76 }
]
},{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" }
]
}
];
map.setOptions({styles: styles});
// Creating a global infoWindow object that will be reused by all markers
var infoWindow = new google.maps.InfoWindow();
// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
})();
回答by Michael Geary
This is a reply to @JoanManuelHernández's answer, but I can't post formatted code in a comment.
这是对@JoanManuelHernández 的回答的回复，但我无法在评论中发布格式化的代码。
Joan, your solution is excellent; it's very similar to how I would do it myself. Creating an array of marker locations is way better than using individual variables for each one.
琼，你的解决方案很棒；这与我自己做的方式非常相似。创建一个标记位置数组比为每个标记位置使用单独的变量要好得多。
I'd like to suggest a couple of minor improvements. One is where you have the array named json. That isn't a very descriptive name; jsoncould mean any kind of data. How about calling it something like placesor locationsor the like?
我想建议一些小的改进。一种是您拥有名为json. 这不是一个非常具有描述性的名称；json可能意味着任何类型的数据。如何调用它像places或locations或之类的？
Next, where you have the loop that creates the closure to handle the asynchronous callback, I think it's a bit easier to understand how it works if you move the entire loop body into its own function. Then you don't need the inline anonymous function. So this code:
接下来，如果您拥有创建闭包来处理异步回调的循环，我认为如果将整个循环体移动到它自己的函数中，会更容易理解它是如何工作的。那么你就不需要内联匿名函数了。所以这段代码：
// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
would become:
会成为：
// Looping through the places list
for( var i = 0, length = places.length; i < length; i++ ) {
addPlace( places[i] );
}
// Add one place marker
function addPlace( place ) {
var latLng = new google.maps.LatLng( place.lat, place.lng );
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: place.title
});
// Attaching a click event to the current marker
google.maps.event.addListener( marker, "click", function(e) {
infoWindow.setContent( place.description );
infoWindow.open( map, marker );
});
}
It does the same thing, just a little simpler this way.
它做同样的事情，只是这样简单一点。
One other thought: The styled map stuff is very cool—I'm a big fan of styled maps myself—but I wonder if it should be left out here for the sake of simplicity, since it isn't related to the OP's question?
另一个想法：样式化地图的东西非常酷——我自己是样式化地图的忠实粉丝——但我想知道是否应该为了简单起见将它排除在外，因为它与 OP 的问题无关？
Feel free to incorporate any of these ideas into your own answer if you like them, and if anyone else finds this variation useful, please upvote Joan's answer since that's where the original code came from.
如果您喜欢这些想法，请随意将这些想法中的任何一个合并到您自己的答案中，如果其他人认为此变体有用，请为 Joan 的答案点赞，因为原始代码来自于此。
