也许有一个解决方案:
我正在使用Gmap api将地图嵌入在地图上方的叠加层下面。叠加层右侧有一个小箭头,我希望我的地图标记位于此点(或旁边的几个像素)
我知道可以使用GMaps Infowindow,但我这样做。
因此,我可以使用$("#arrow").offset()
来获取其在网页上的排名,但我不知道如何move
或pan
地图居中于此像素目的地。
window.onload = function() {
var myOptions = {
center: new google.maps.LatLng(47.259998, 11.398032),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(47.260071, 11.404705),
map: map,
});
console.log( $("#arrow").offset().top );
}
更新
这是我现在在页面模板中的代码。我有最后一个问题。如果我的页面宽度为1440px,那么标记相对于我的小箭头的位置就可以正常工作:https://goo.gl/u489nd但是,只要我将页面调整为较小的宽度并再次加载页面,标记就会落后覆盖层并没有相对于小箭头定位。 https://goo.gl/k4rPYv
google.maps.event.addDomListener(window, 'load', initMap);
window.onresize = function() {
positionMap();
}
function initMap() {
var myOptions = {
center: new google.maps.LatLng(47.260071, 11.404705),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
draggable: false,
mapTypeControl: false,
zoomControl: false,
scaleControl: false,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(47.260071, 11.404705),
map: map,
title: 'Österreichisches Rotes Kreuz Innsbruck'
});
}
function positionMap() {
var arrowPos = $("#map-center").position();
console.log(arrowPos);
var getPixelOffset = function(map, marker) {
// Calculate marker position in pixels form upper left corner
var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
map.getBounds().getNorthEast().lat(),
map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
return pixelOffset;
};
// Wait until the map is initialized
var listener = google.maps.event.addListener(map, "idle", function() {
var pixelOffset = getPixelOffset(map, marker);
// Do the pan
map.panBy( Math.abs( pixelOffset.x - ( arrowPos.left ) - 150 ),
Math.abs( pixelOffset.y - ( arrowPos.top ) ) - 50 );
google.maps.event.removeListener(listener);
});
}
答案 0 :(得分:2)
一种方法是使用map.getProjection().fromLatLngToPoint()
在地图中找到标记的像素位置,然后从标记位置中减去$("#arrow").offset()
并调用map.panBy()
以移动标记计算差异。
以下是将标记移动到样本位置{ top: 50, left: 100 }
的演示:
var myOptions = {
center: new google.maps.LatLng(47.259998, 11.398032),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(47.260071, 11.404705),
map: map,
title: 'Hello World!'
});
// Replace this with call to $("#arrow").offset()
var arrowPos = { top: 50, left: 100 };
var getPixelOffset = function(map, marker) {
// Calculate marker position in pixels form upper left corner
var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
map.getBounds().getNorthEast().lat(),
map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
return pixelOffset;
};
// Wait until the map is initialized
var listener = google.maps.event.addListener(map, "idle", function() {
var pixelOffset = getPixelOffset(map, marker);
// Do the pan
map.panBy(Math.abs(pixelOffset.x - arrowPos.left),
Math.abs(pixelOffset.y - arrowPos.top));
google.maps.event.removeListener(listener);
});
html,
body,
#map {
display: block;
width: 100%;
height: 100%;
}
#map {
background: #58B;
}
<script src="http://maps.google.com/maps/api/js?sensor=true&.js"></script>
<div id="map"></div>
另外,请注意,在地图完全加载时,即在空闲事件处理程序中,您必须这样做。否则(这就是我所经历的)getProjection()
方法可能不可用。
参考文献: