Question

我的网站（www.xeryon.com）地图上的标记位于Lat / Long的右侧位置。但是，标记位于画布的左上角而不是中心。重新加载页面时，标记位于画布的中心。当我将功能“loadpage”添加到我的网站时，这个问题就开始了（这会给我的页面添加超时）。如何更改代码以确保标记始终位于画布的中心？

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="images/logo_x_transparent.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="images/logo_x_transparent.ico" rel="icon" type="image/vnd.microsoft.icon" />
<link href="http://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Raleway:600" rel="stylesheet" type="text/css" />
<meta content="width=device-width, initial-scale = 1.0, user-scalable = no" name="viewport">
<title>XERYON - Experts in Piezo and Precision technology.</title>
<link href="products/default.css" media="screen" rel="stylesheet" type="text/css">
<link href="stylesheet/normaliz.css" media="screen" rel="stylesheet" type="text/css">
<link href="stylesheet/960.css" media="screen" rel="stylesheet" type="text/css">
<link href="stylesheet/prettyPhoto.css" rel="stylesheet" type="text/css">
<link href="stylesheet/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="js/jquery.stellar.js" type="text/javascript"></script><!--moves the background position-->
<script src="js/jquery.waypoints.js" type="text/javascript"></script>
<script src="js/jquery.isotope.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function(){
            jQuery("a[data-gal^='prettyPhoto']").prettyPhoto({
                social_tools: ''
            });
        });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var myVar;
function loadpage() {
    myVar = setTimeout(showPage, 500);
}
function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
  google.maps.event.trigger(map, 'resize')
}
</script>
<script type="text/javascript">
function initMap(){
    myVar = setTimeout(loadmap, 1000);
}
function loadmap(){
var myOptions = {zoom:10,scrollwheel:false,styles: [{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#d3d3d3"}]},{"featureType":"transit","stylers":[{"color":"#808080"},{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#b3b3b3"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"weight":1.8}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"color":"#d7d7d7"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ebebeb"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"color":"#a7a7a7"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#efefef"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#696969"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"color":"#737373"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#d6d6d6"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"color":"#dadada"}]}],
center:new google.maps.LatLng(50.84934800000001,4.735665199999971),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(50.84934800000001,4.735665199999971),icon:'http://www.googlemapsmarkers.com/v1/8BFA02/'});infowindow = new google.maps.InfoWindow({content:'<strong>Xeryon</strong><br>Interleuvenlaan 62, Leuven<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
</script>
</head>
<body onload="loadpage()" style="margin: 0;">
<div class="grid_12" id="loader">
</div>
<div id="myDiv" class="animate-bottom">
<!-- Google maps start -->
<script async="" defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVV-HH7g0RyA0hsXUkXWFZ1R09FOvBwiU&amp;callback=initMap">
</script>
<div style=" height: 350px; width: 100%;">
    <div id="gmap_canvas" style="height: 350px; width: 100%;">
    </div>  
    <style>
    #gmap_canvas img {
max-width: none!important;
background: none!important;}
</style>
</div>
<!-- Google maps end-->
</div>
</body>
</html>

Answer 1

map.setCenter(new google.maps.LatLng(50.849348, 4.7356652))之后致电google.maps.event.trigger(map, 'resize')（在地图div的大小由API建立后设置地图中心）：

function showPage() { document.getElementById("loader").style.display = "none"; document.getElementById("myDiv").style.display = "block"; google.maps.event.trigger(map, 'resize'); map.setCenter(new google.maps.LatLng(50.849348, 4.7356652)); }

Google标记位于左上角

1 个答案: