我有一个使用 Google Maps API V3 构建的 map 制作工具。它允许用户输入两个或多个位置并生成 map 和路线。我还有一个复选框，单击该复选框时，会显示指示附近兴趣点的标记。
当我第一次构建这个工具时，我认为它每次都运行良好。但最近，我注意到单击复选框时并不总是出现标记。 map 和路线工作正常，但标记只是偶尔工作。当它们不工作时似乎会发生此错误:
Uncaught ReferenceError: map is not defined
它引用了 javascript 的“cmarkers”部分(见下文)。
背景详细信息:这是 Rails Web 应用程序和名为“Itineraries”的网页/布局的一部分。当您登陆行程网页并单击“ map 制作工具”图标时，就会出现 map 制作工具。它加载在 i-frame 中，称为“map.html.erb”， map View 位于/views/itineraries 中。然而， map 制作器的所有 javascript 都位于 Itineraries 布局文件中。
根据对这些帖子的审查，我认为这可能与我订购或初始化代码的方式有关，并且我认为罪魁祸首可能是代码的“cmarkers”部分。
- Google Maps API Sometimes Not Showing Markers
- Google maps api(v3) doesn't show markers
- Google Maps API v3 javascript Markers don't always load
我尝试了几种不同的更改，但每种更改要么不起作用，要么阻止 map 初始化。这是 JavaScript；请注意，API key 和其他小部分已被编辑。下面是标记的代码。
<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false"></script>
<script type='text/javascript'>
$(function(){
var directionsDisplay;
var map;
function overlaysClear() {
if (markersArray) {
for( var i = 0, n = markersArray.length; i < n; ++i ) {
markersArray[i].setVisible(false);
}
}
}
function overlaysShow() {
if (markersArray) {
for( var i = 0, n = markersArray.length; i < n; ++i ) {
markersArray[i].setVisible(true);
}
}
}
$("#showmapview").click(function() {
overlaysClear();
$('#mapeach').attr('checked', false);
});
$('#mapeach').change(function() {
if( $('#mapeach').attr("checked")) {
overlaysShow();
}
else {
overlaysClear();
}
});
cmarkers();
google.maps.event.addDomListener(window, 'load', initialize);
});
var directionsService = new google.maps.DirectionsService();
var markersArray = [];
var arrInfoWindows = null;
function initialize() {
var rendererOptions = {
draggable: true,
panel:document.getElementById('directions_panel')
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var waypts = [];
var checkboxArray = document.getElementById("waypoints");
for (var i = 0; i < checkboxArray.length; i++) {
waypts.push({
location:checkboxArray[i].value,
stopover:true
});
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: optimize,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
}
});
};
function cmarkers() {
$.getJSON( "/mapeach.js", {}, function( data ) {
$.each( data, function( i, item ) {
var loc = item.mainlocation;
$("#markers").append('<li><a href="#" rel="' + i + '">' + loc.nickname + '</a></li>');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
map: map,
title: loc.nickname,
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: '<a class="clink" href="/spots/'+ loc.id +'/'+ loc.nickname +'" target="_blank">'+ loc.nickname +'</a>'
});
google.maps.event.addListener(marker, 'click', function() {
if (arrInfoWindows != null) {
arrInfoWindows.close();
}
infowindow.open(map,marker);
arrInfoWindows = infowindow;
});
});
});
};
</script>
mapeach.js 文件的格式如下:
[{"mainlocation":{"latitude":"40.706352","nickname":"First Location","id":100000,"longitude":"-73.987650"}},{"mainlocation":{"latitude":"34.061148","nickname":"Second Location","id":100001,"longitude":"-118.273067"}}]
最佳答案
我能够通过将 cmarkers 代码移动到初始化中来解决这个问题。我认为 javascript 没有明确说明初始化中的映射变量也是 cmarkers 函数中的映射变量(抱歉，如果语言不精确；我不太擅长 js)。见下文:
function initialize() {
var rendererOptions = {
draggable: true,
panel:document.getElementById('directions_panel')
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
cmarkers();
function cmarkers() {
$.getJSON( "/mapeach.js", {}, function( data ) {
$.each( data, function( i, item ) {
var loc = item.mainlocation;
$("#markers").append('<li><a href="#" rel="' + i + '">' + loc.nickname + '</a></li>');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
map: map,
title: loc.nickname,
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: '<a class="clink" href="/spots/'+ loc.id +'/'+ loc.nickname +'" target="_blank">'+ loc.nickname +'</a>'
});
google.maps.event.addListener(marker, 'click', function() {
if (arrInfoWindows != null) {
arrInfoWindows.close();
}
infowindow.open(map,marker);
arrInfoWindows = infowindow;
});
});
});
};
特别感谢这篇文章给了我这个想法:can't see google marker
关于javascript - Google Maps API v3 标记有时仅加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42566215/