Javascript 为什么我的谷歌地图V3标记集中在屏幕上,而不是放在它们的地理位置上?
对于我的网站ASP.net vb,我正在制作一个交互式Google地图页面,其中标记从XML文件中加载。当我编写代码并测试localhost时,一切正常。现在我把所有东西都上传到了服务器上,我所有的标记都放错了地方,我似乎无法解决这个问题。也许有人也有同样的问题或者知道我做错了什么 我的地图可以在这里查看: 我的代码:Javascript 为什么我的谷歌地图V3标记集中在屏幕上,而不是放在它们的地理位置上?,javascript,google-maps,Javascript,Google Maps,对于我的网站ASP.net vb,我正在制作一个交互式Google地图页面,其中标记从XML文件中加载。当我编写代码并测试localhost时,一切正常。现在我把所有东西都上传到了服务器上,我所有的标记都放错了地方,我似乎无法解决这个问题。也许有人也有同样的问题或者知道我做错了什么 我的地图可以在这里查看: 我的代码: $(document).ready(function () { // Set map height to match viewport v
$(document).ready(function () {
// Set map height to match viewport
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
viewportHeight = viewportHeight - 60;
$("#maps").css({ 'height': viewportHeight }, 0);
$(window).resize(function () {
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
viewportHeight = viewportHeight - 60;
$("#maps").css({ 'height': viewportHeight }, 0);
});
$("body").css("overflow", "hidden");
// Filter tabs
$("#filter > div").hide();
$("#filter > div:first").show();
$("#filter > ul li a").click(function () {
if ($(this).parent().hasClass("active")) {
return false;
} else {
var index = $(this).parent().index() + 5;
$("#filter > ul li").removeClass("active");
$(this).parent().addClass("active");
$("#filter > div").slideUp(250);
$("#filter > div:nth-child(" + index + ")").slideDown(250);
if ($("#filter > div:nth-child(" + index + ")").attr("id") == "search") {
$("#search .input").focus();
}
return false;
}
});
// Drag info and filter
$("#filter").draggable({ containment: "#maps", scroll: false, handle: ".move" });
$("#stadium-info").draggable({ containment: "#maps", scroll: false, handle: ".move" });
// Hide info
$('#stadium-info').hide();
// Info closed
$('.close').click(function () {
var val = $(this).attr('rel');
markers[val].setMap(map);
unlock();
$('#stadium-info').fadeOut(500);
$('#filter').delay(1000).fadeIn(500);
return false;
});
$('.next, .prev').live('click', function (e) {
e.preventDefault();
var id = $(this).attr('rel');
google.maps.event.trigger(markers[id], 'click');
});
});
// Calculate best zoom for displaysize
var startZoom = null;
var viewportWidth = window.innerWidth ? window.innerWidth : $(window).width();
if (viewportWidth >= 1920) {
startZoom = 3;
} else {
startZoom = 2;
}
// Map options
var markers = [];
var emptyZoom = 17;
var startPosition = new google.maps.LatLng(10.0, 28.652344);
var mapOptions = {
zoom: startZoom,
center: startPosition,
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: false,
streetViewControl: false,
minZoom: startZoom,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
}
};
var map = new google.maps.Map(document.getElementById("google-maps"), mapOptions);
// Lock map
function lock() {
map.setOptions({
disableDoubleClickZoom: true,
draggable: false,
zoomControl: false,
panControl: false,
scrollwheel: false
});
}
// Unlock map
function unlock() {
map.setOptions({
disableDoubleClickZoom: false,
draggable: true,
zoomControl: true,
panControl: true,
scrollwheel: true
});
}
// Vars lat lng zoom for infobox
var oldLat = null;
var oldLng = null;
var oldZoom = null;
// Create markers
$.ajax({
type: "GET",
url: "xml/Maps.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('stadium').each(function () {
var lat = $(this).attr('latitude');
var lng = $(this).attr('longitude');
var zoom = $(this).attr('zoom');
var name = $(this).attr('name');
var id = $(this).attr('id');
var countryId = $(this).parent().attr('id');
if (lat > 0 || lat < 0) {
if (zoom == 0) {
zoom = emptyZoom;
}
var point = new google.maps.LatLng(lat, lng)
var marker = new google.maps.Marker({
position: point,
map: map,
icon: 'img/bg/icon-stadium.png',
title: name
});
marker.metadata = { id: id, name: name, countryId: countryId };
markers[id] = marker;
// Marker click function
google.maps.event.addListener(marker, 'click', function () {
// Save current lat lng zoom to cookie
//alert(map.getZoom());
// Zoom in on marker and hide marker
offset = new google.maps.LatLng(lat, parseFloat(lng) + parseFloat(0.0015));
map.panTo(offset);
map.setZoom(parseInt(zoom));
lock();
marker.setMap(null);
// Hide filter
$('#filter').fadeOut(500);
// Determine info position
var right;
if (viewportWidth > 1280) {
right = viewportWidth - 960;
right = right / 2 - 10;
} else {
right = 30;
}
// Get marker id
var id = marker.metadata.id;
$.ajax({
type: "GET",
url: "xml/Maps.xml",
dataType: "xml",
success: function (xml) {
var flag = $(xml).find("stadium[id=" + id + "]").parent().attr('flag');
var club = $(xml).find("stadium[id=" + id + "]").attr('club');
var capacity = $(xml).find("stadium[id=" + id + "]").attr('capacity');
var constructed = $(xml).find("stadium[id=" + id + "]").attr('constructed');
var inuse = $(xml).find("stadium[id=" + id + "]").attr('inuse');
var countryid = $(xml).find("stadium[id=" + id + "]").parent().attr('id');
var countryname = $(xml).find("stadium[id=" + id + "]").parent().attr('name');
var nextstadiumname = $(xml).find("stadium[id=" + id + "]").next().attr('name');
var nextstadiumclub = $(xml).find("stadium[id=" + id + "]").next().attr('club');
var nextstadiumid = $(xml).find("stadium[id=" + id + "]").next().attr('id');
var prevstadiumname = $(xml).find("stadium[id=" + id + "]").prev().attr('name');
var prevstadiumclub = $(xml).find("stadium[id=" + id + "]").prev().attr('club');
var prevstadiumid = $(xml).find("stadium[id=" + id + "]").prev().attr('id');
var rating = parseFloat($(xml).find("stadium[id=" + id + "]").attr('rating'));
$('#stadium-info a.close').attr("rel", id);
$('#stadium-info h6:first').html(name).prepend('<img src="uploads/flags/' + flag + '.png" alt="' + countryname + '" /> ');
$('#stadium-info').css('right', right).delay(1000).fadeIn(500);
if (nextstadiumname == undefined) {
nextstadiumname = $(xml).find("country[id=" + countryid + "]").children().first().attr('name');
nextstadiumclub = $(xml).find("country[id=" + countryid + "]").children().first().attr('club');
nextstadiumid = $(xml).find("country[id=" + countryid + "]").children().first().attr('id');
}
$('.next').html(nextstadiumname);
$('.next').attr('title', nextstadiumname + ', ' + nextstadiumclub);
$('.next').attr('rel', nextstadiumid);
if (prevstadiumname == undefined) {
prevstadiumname = $(xml).find("country[id=" + countryid + "]").children().last().attr('name');
prevstadiumclub = $(xml).find("country[id=" + countryid + "]").children().last().attr('club');
prevstadiumid = $(xml).find("country[id=" + countryid + "]").children().last().attr('id');
}
$('.prev').html(prevstadiumname);
$('.prev').attr('title', prevstadiumname + ', ' + prevstadiumclub);
$('.prev').attr('rel', prevstadiumid);
$('#info-capacity').html(capacity);
$('#info-club').html(club.replace(/_/g, "<br />"));
$('#info-constructed').html(constructed);
$('#info-inuse').html(inuse);
var oRating = $find("ctl00_ContentPlaceHolder2_GoogleMaps1_rating");
oRating.set_value(rating);
}
});
});
}
});
}
});
//Filters
// Reset filters and show all markers
function ResetFilters() {
$("#search .input").val("Zoek op trefwoord");
ResetMarkers();
}
// Reset all markers to map
function ResetMarkers() {
for (i in markers) {
markers[i].setMap(map);
}
}
// Filter by country
$("#filter_country").live("change", function () {
var val = $(this).val();
$.ajax({
type: "GET",
url: "xml/Maps.xml",
dataType: "xml",
success: function (xml) {
var lat = $(xml).find("country[id=" + val + "]").attr("latitude");
var lng = $(xml).find("country[id=" + val + "]").attr("longitude");
var zoom = $(xml).find("country[id=" + val + "]").attr("zoom");
if (lat > "0" && lng > "0") {
var countryPosition = new google.maps.LatLng(lat, lng);
map.panTo(countryPosition);
map.setZoom(parseInt(zoom));
}
}
});
if (val > 0) {
for (i in markers) {
if (markers[i].metadata.countryId == val) {
markers[i].setMap(map);
} else {
markers[i].setMap(null);
}
}
} else {
ResetMarkers();
}
});
// Filter by stadium
$("#filter_stadium").live("change", function () {
var val = $(this).val();
//var marker = new google.maps.Marker(markers[val]);
google.maps.event.trigger(markers[val], 'click');
});
// Filter by keywords
$("#search .input").keyup(function () {
var val = $(this).val().toLowerCase();
if (val != "suche nach schlüsselwort" && val != "search by keyword" && val != "zoek op trefwoord") {
for (i in markers) {
if (markers[i].metadata.name.toLowerCase().indexOf(val) >= 0) {
markers[i].setMap(map);
} else {
markers[i].setMap(null);
}
}
} else {
ResetMarkers();
}
});
$('#search .input').focus(function () {
map.setCenter(startPosition);
map.setZoom(startZoom);
});
$("#filter ul li a").click(function () {
ResetFilters();
return false;
});
这是你的数据-在0、0有很多位置,它们都在这个点的几度之内。
< P>这是你的数据-0,0有许多位置,它们都在这个点的几度之内。它们都显示在海洋中央吗?如果是这样,LNG/LAT可能不设置或0/0.-它们都显示在海洋的中间吗?如果是这样的话,lng/lat可能没有设置或0/0。你的权利,我真愚蠢,没有看到这一点。我现在知道问题出在哪里了,在我创建maps.xml的函数中。此函数用于删除部分纬度和经度。事实上,然后使用6.xx的值,它们都接近0.0你的权利,我真愚蠢,没有看到这一点。我现在知道问题出在哪里了,在我创建maps.xml的函数中。此函数用于删除部分纬度和经度。实际上,然后使用6.xx的值,它们都接近于0.0