1
모든, 내가있어 다음과 같은 코드를 기반으로 센터링하지 :Google지도는 내지도를 표시하는 위도/경도
<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 */
}
고마워요!
원본 질문을 볼 수 있도록 업데이트했습니다. 그러나 당신은 정확합니다. $ jsData는지도 중심을 설정하려고하는 좌표와 동일한 좌표를가집니다. – user1048676
죄송합니다. 문제의 데모를 제공해주십시오. 그렇지 않으면 도움을 드릴 수 없습니다. 나는 이것을 테스트하고 있었고 마커 (물론)는 중심에 있었다. 확대/축소가 1 또는 15인지 여부와 상관없이 항상 뷰포트에서 동일한 위치에 배치되므로 중심에 있어야합니다 (내 테스트 케이스에서). –
내 로컬 호스트에 있으므로 실제로 표시 할 수 없습니다. jsfiddle을 만들어서 작동하는지 확인하려고 시도했지만 제대로로드되지 않아 뭔가 빠져 있어야합니다. 수동으로 값을 하드 코드했는데 여전히 내 사이트에 제대로 표시되지 않았습니다. 여기 jsfiddle이 있습니다. 그래서 당신이 일할 수 있는지 알 수 있습니다 : http://jsfiddle.net/Lrjmt/ – user1048676