我有一张谷歌地图,半透明面板覆盖了该区域的一部分。我想调整地图的中心点,以考虑部分遮挡的地图部分。见下图。理想情况下,十字准线和引脚放置的位置将是地图的中心点。
我希望这是有道理的。
原因很简单:缩放时,需要将地图置于十字准线上而不是50%50%。此外,我将在地图上绘制标记并按顺序移动它们。当地图以它们为中心时,它们也需要处于偏移位置。
提前致谢!
答案 0 :(得分:75)
一旦找到the relevant previous answer,这并不是特别困难。
您需要将地图中心转换为世界坐标,找到地图需要居中的位置,将明显中心放在您想要的位置,然后重新定位地图中心使用真实的中心。
API始终将地图置于视口中心的中心,因此如果使用map.getCenter()
,则需要小心,因为它将返回真实的中心,而不是明显的中心。我想可以重载API,以便替换它的getCenter()
和setCenter()
方法,但我还没有这样做。
以下代码。 Example online。在该示例中,单击按钮将地图的中心(那里有一个道路交叉点)向下移动100px并离开200px。
function offsetCenter(latlng, offsetx, offsety) {
// latlng is the apparent centre-point
// offsetx is the distance you want that point to move to the right, in pixels
// offsety is the distance you want that point to move upwards, in pixels
// offset can be negative
// offsetx and offsety are both optional
var scale = Math.pow(2, map.getZoom());
var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0);
var worldCoordinateNewCenter = new google.maps.Point(
worldCoordinateCenter.x - pixelOffset.x,
worldCoordinateCenter.y + pixelOffset.y
);
var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
map.setCenter(newCenter);
}
答案 1 :(得分:63)
另请查看地图对象上的panBy(x:number,y:number)函数。
文档提到了这个函数:
按给定距离(以像素为单位)更改地图中心。如果距离小于地图的宽度和高度,则过渡将平滑地动画。请注意,地图坐标系从西向东(对于x值)和从北向南(对于y值)增加。
就这样使用它:
mapsObject.panBy(200, 100)
答案 2 :(得分:10)
这是一种更简单的方法,可能在响应式设计中更有用,因为您可以使用百分比而不是像素。没有世界坐标,没有LatLngs到点!
var center; // a latLng
var offsetX = 0.25; // move center one quarter map width left
var offsetY = 0.25; // move center one quarter map height down
var span = map.getBounds().toSpan(); // a latLng - # of deg map spans
var newCenter = {
lat: center.lat() + span.lat()*offsetY,
lng: center.lng() + span.lng()*offsetX
};
map.panTo(newCenter); // or map.setCenter(newCenter);
答案 3 :(得分:8)
以下是使用地图API的panBy()
方法解决问题的示例:http://jsfiddle.net/upsidown/2wej9smf/
答案 4 :(得分:6)
安德鲁的答案就是答案。但是,在我的情况下,map.getBounds()保持返回undefined。我修复它等待bounds_changed事件,然后调用函数来偏移中心。像这样:
var center_moved = false;
google.maps.event.addListener(map, 'bounds_changed', function() {
if(!center_moved){
offsetCenter(map.getCenter(), 250, -200);
center_moved = true;
}
});
答案 5 :(得分:4)
老问题,我知道。但是以CSS为中心的方式呢?
http://codepen.io/eddyblair/pen/VjpNQQ
我做的是:
将地图包裹并覆盖在包含overflow: hidden
使用position: absolute
通过设置负数margin-left
,按地图宽度(加上任何填充和偏移)扩展地图的视在宽度。
然后,为了遵守https://www.google.com/permissions/geoguidelines/attr-guide.html定位的小部件和归因div
s。
这样,地图的中心与所需区域的中心对齐。 js只是标准的地图js。
重新定位街景图标是读者的一项练习:)
如果您想要左侧的叠加层,只需将第24
margin-left
行更改为margin-right
,将第32行right
更改为left
。
答案 6 :(得分:3)
经过广泛搜索后,我找不到一种方法来做到这一点,包括缩放。值得庆幸的是clever chap已经弄清楚了。还有fiddle here
'use strict';
const TILE_SIZE = {
height: 256,
width: 256
}; // google World tile size, as of v3.22
const ZOOM_MAX = 21; // max google maps zoom level, as of v3.22
const BUFFER = 15; // edge buffer for fitting markers within viewport bounds
const mapOptions = {
zoom: 14,
center: {
lat: 34.075328,
lng: -118.330432
},
options: {
mapTypeControl: false
}
};
const markers = [];
const mapDimensions = {};
const mapOffset = {
x: 0,
y: 0
};
const mapEl = document.getElementById('gmap');
const overlayEl = document.getElementById('overlay');
const gmap = new google.maps.Map(mapEl, mapOptions);
const updateMapDimensions = () => {
mapDimensions.height = mapEl.offsetHeight;
mapDimensions.width = mapEl.offsetWidth;
};
const getBoundsZoomLevel = (bounds, dimensions) => {
const latRadian = lat => {
let sin = Math.sin(lat * Math.PI / 180);
let radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
};
const zoom = (mapPx, worldPx, fraction) => {
return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
};
const ne = bounds.getNorthEast();
const sw = bounds.getSouthWest();
const latFraction = (latRadian(ne.lat()) - latRadian(sw.lat())) / Math.PI;
const lngDiff = ne.lng() - sw.lng();
const lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;
const latZoom = zoom(dimensions.height, TILE_SIZE.height, latFraction);
const lngZoom = zoom(dimensions.width, TILE_SIZE.width, lngFraction);
return Math.min(latZoom, lngZoom, ZOOM_MAX);
};
const getBounds = locations => {
let northeastLat;
let northeastLong;
let southwestLat;
let southwestLong;
locations.forEach(function(location) {
if (!northeastLat) {
northeastLat = southwestLat = location.lat;
southwestLong = northeastLong = location.lng;
return;
}
if (location.lat > northeastLat) northeastLat = location.lat;
else if (location.lat < southwestLat) southwestLat = location.lat;
if (location.lng < northeastLong) northeastLong = location.lng;
else if (location.lng > southwestLong) southwestLong = location.lng;
});
const northeast = new google.maps.LatLng(northeastLat, northeastLong);
const southwest = new google.maps.LatLng(southwestLat, southwestLong);
const bounds = new google.maps.LatLngBounds();
bounds.extend(northeast);
bounds.extend(southwest);
return bounds;
};
const zoomWithOffset = shouldZoom => {
const currentzoom = gmap.getZoom();
const newzoom = shouldZoom ? currentzoom + 1 : currentzoom - 1;
const offset = {
x: shouldZoom ? -mapOffset.x / 4 : mapOffset.x / 2,
y: shouldZoom ? -mapOffset.y / 4 : mapOffset.y / 2
};
const newCenter = offsetLatLng(gmap.getCenter(), offset.x, offset.y);
if (shouldZoom) {
gmap.setZoom(newzoom);
gmap.panTo(newCenter);
} else {
gmap.setCenter(newCenter);
gmap.setZoom(newzoom);
}
};
const setMapBounds = locations => {
updateMapDimensions();
const bounds = getBounds(locations);
const dimensions = {
width: mapDimensions.width - mapOffset.x - BUFFER * 2,
height: mapDimensions.height - mapOffset.y - BUFFER * 2
};
const zoomLevel = getBoundsZoomLevel(bounds, dimensions);
gmap.setZoom(zoomLevel);
setOffsetCenter(bounds.getCenter());
};
const offsetLatLng = (latlng, offsetX, offsetY) => {
offsetX = offsetX || 0;
offsetY = offsetY || 0;
const scale = Math.pow(2, gmap.getZoom());
const point = gmap.getProjection().fromLatLngToPoint(latlng);
const pixelOffset = new google.maps.Point((offsetX / scale), (offsetY / scale));
const newPoint = new google.maps.Point(
point.x - pixelOffset.x,
point.y + pixelOffset.y
);
return gmap.getProjection().fromPointToLatLng(newPoint);
};
const setOffsetCenter = latlng => {
const newCenterLatLng = offsetLatLng(latlng, mapOffset.x / 2, mapOffset.y / 2);
gmap.panTo(newCenterLatLng);
};
const locations = [{
name: 'Wilshire Country Club',
lat: 34.077796,
lng: -118.331151
}, {
name: '301 N Rossmore Ave',
lat: 34.077146,
lng: -118.327805
}, {
name: '5920 Beverly Blvd',
lat: 34.070281,
lng: -118.331831
}];
locations.forEach(function(location) {
let marker = new google.maps.Marker({
position: new google.maps.LatLng(location.lat, location.lng),
title: location.name
})
marker.setMap(gmap);
markers.push(marker);
});
mapOffset.x = overlayEl.offsetWidth;
document.zoom = bool => zoomWithOffset(bool);
document.setBounds = () => setMapBounds(locations);
&#13;
section {
height: 180px;
margin-bottom: 15px;
font-family: sans-serif;
color: grey;
}
figure {
position: relative;
margin: 0;
width: 100%;
height: 100%;
}
figcaption {
position: absolute;
left: 15px;
top: 15px;
width: 120px;
padding: 15px;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
gmap {
display: block;
height: 100%;
}
&#13;
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<section>
<figure>
<gmap id="gmap"></gmap>
<figcaption id="overlay">
<h4>Tile Overlay</h4>
<p>To be avoided by the map!</p>
</figcaption>
</figure>
</section>
<button onclick="zoom(true)">zoom in</button>
<button onclick="zoom(false)">zoom out</button>
<button onclick="setBounds()">set bounds</button>
&#13;
答案 7 :(得分:3)
只是找到了另一个最简单的解决方案。 如果您使用fitBounds方法,则可以将可选的第二个参数传递给它。此参数为padding,在拟合边界时将予以考虑。
// pass single side:
map.fitBounds(bounds, { left: 1000 })
// OR use Number:
map.fitBounds(bounds, 20)
进一步阅读:official docs。
答案 8 :(得分:1)
在抵消路线或一组标记时,另一种方法可以在这里找到:
https://stackoverflow.com/a/26192440/1238965
它仍然使用@Andrew Leach答案中描述的fromLatLngToPoint()
方法。
答案 9 :(得分:0)
以下是SIMPLE用于:
的示例500
250
当屏幕尺寸实时变化时,该解决方案也能顺利运行。
要求在 css 中使用 @media screen and (min-width: 1025px)
和 @media screen and (max-width: 1024px)
代码:
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 13
});
bounds = new google.maps.LatLngBounds();
// add markers to bounds
// Initial bounds
defineBounds()
// Trigger resize browser and set new bounds
google.maps.event.addDomListener(window, 'resize', function() {
defineBounds()
});
}
function defineBounds() {
if (window.matchMedia("(min-width:1025px)").matches) {
map.fitBounds(bounds, {
top: 100,
right: 100,
left: 600, // 500 + 100
bottom: 100
});
} else {
map.fitBounds(bounds, {
top: 80,
right: 80,
left: 80,
bottom: 330 // 250 + 80
});
}
}
可以为位于屏幕两侧的OVERLAY定制解决方案