谷歌地图不基于Lat / Long中心

时间:2012-02-22 00:04:56

标签: javascript google-maps

全部, 我有以下代码来显示我的地图:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script  type="text/javascript">
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function'){ 
    window.onload = func
} else { 
    window.onload = function() {
        oldonload();
        func();
    }
}
}

var map,
    infowin=new google.maps.InfoWindow({content:'moin'});
function loadMap() 
{
  map = new google.maps.Map(
    document.getElementById('map_vendor'),
    {   
      zoom: 15,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      center:new google.maps.LatLng(<?php echo $lat; ?>, 
                                    <?php echo $long; ?>)
    });

  addPoints(myStores);
}

function addPoints( points )
{  
  //var bounds=new google.maps.LatLngBounds();
  for ( var p = 0; p < points.length; ++p )
  {
    var pointData = points[p];
    if ( pointData == null ) {map.fitBounds(bounds);return; }
    var point = new google.maps.LatLng( pointData.latitude, pointData.longitude );
    //bounds.union(new google.maps.LatLngBounds(point));
    createMarker( point,  pointData.html );
  }
  //map.fitBounds(bounds);

}

function createMarker(point,  popuphtml) 
{
  var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
  var marker = new google.maps.Marker(
    {
      position:point,
      map:map
    }
  );
  google.maps.event.addListener(marker, 'click', function() {
      infowin.setContent(popuphtml)
      infowin.open(map,marker);
    });

}

function Store( lat, long, text )
{
    this.latitude = lat;
    this.longitude = long;
    this.html = text;
}

var myStores = [<?php echo $jsData;?>, null];
addLoadEvent(loadMap);
</script>

使用以下代码设置$ jsData:

$lat = get_post_meta($post->ID,'latitude',TRUE);
$long = get_post_meta($post->ID,'longitude',TRUE);
$post_id = $post->ID;
$get_post_info = get_post($post_id); 
$name = $get_post_info->post_title;
$jsData = $jsData . "new Store( $lat, $long, '$name' ),\n";

正确显示点,但我的地图未正确居中。我的地图总是位于该点的位置东南方,只是一点点,但我希望它能够集中在这一点上。我怎么能这样做呢?

编辑:这是您请求的CSS。这是一个主题,所以如果它很疯狂我很抱歉:

#map_vendor{
padding:10px;
width:925px;
height:300px;
}
.styled-image, .the-post-image figure, .styled-slideshow, .gallery .gallery-icon a { 
border-color: #C9CBCD;
background: #F7F7F7;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#E7E8EB));
background: -moz-linear-gradient(top, #fff,  #E7E8EB);
background: linear-gradient(#fff, #E7E8EB);
-pie-background: linear-gradient(#fff, #E7E8EB);  
}
.styled-image, .the-post-image a figure, .gallery .gallery-icon a { 
-webkit-transition: all 0.15s ease-in-out; 
-moz-transition: all 0.15s ease-in-out; 
transition: all 0.15s ease-in-out; 
}
.styled-image, .the-post-image figure, .styled-slideshow, .gallery .gallery-icon a { 
display: block; display: inline-block; outline: none; padding: 6px;
border: 2px solid #C9CBCD; border-width: 1px 1px 2px;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /* border radius */
/* gradient background */
background: #F7F7F7;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#E7E8EB));
background: -moz-linear-gradient(top, #fff,  #E7E8EB);
background: linear-gradient(#fff, #E7E8EB);
-pie-background: linear-gradient(#fff, #E7E8EB);    
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* box shadow */
-webkit-background-clip: padding-box;   /* smoother borders with webkit */ 
}

谢谢!

1 个答案:

答案 0 :(得分:1)

“点”是什么意思?

目前您将中心设置为$ lat和$ lng,但此位置没有标记(点?)(除非$ jsData内部的坐标相同)。