我正在尝试做这样的事情:
我在屏幕右半边有表格，在屏幕左侧居中有标记。移动 map - 标记将留在左侧的中心，我将从 map 移动时的标记(视觉上，但中心偏移)获取 LatLng。
现在，我已将标记置于 map 的中心，我可以移动 map 并从中心获取 LatLng。
这是执行此操作的脚本:
var map = null;
var marker;
function showlocation() {
if ("geolocation" in navigator) {
/* geolocation is available */
// One-shot position request.
navigator.geolocation.getCurrentPosition(callback, error);
} else {
/* geolocation IS NOT available */
console.warn("geolocation IS NOT available");
}
}
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
function callback(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('default_latitude').value = lat;
document.getElementById('default_longitude').value = lon;
var latLong = new google.maps.LatLng(lat, lon);
map.setZoom(16);
map.setCenter(latLong);
}
// google.maps.event.addDomListener(window, 'load', initAutocomplete);
function initAutocomplete() {
var mapOptions = {
center: new google.maps.LatLng(42.4405026181028, 19.24323633505709),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
google.maps.event.addListener(map, 'center_changed', function () {
document.getElementById('default_latitude').value = map.getCenter().lat();
document.getElementById('default_longitude').value = map.getCenter().lng();
});
$('<div/>').addClass('centerMarker').appendTo(map.getDiv())
.click(function () {
var that = $(this);
if (!that.data('win')) {
that.data('win', new google.maps.InfoWindow({
content: 'this is the center'
}));
that.data('win').bindTo('position', map, 'center');
}
that.data('win').open(map);
});
我在 CSS 中设置了标记:
#map .centerMarker {
position: absolute;
/*url of the marker*/
background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
/*center the marker*/
top: 50%;
left: 50%;
z-index: 1;
/*fix offset when needed*/
margin-left: -10px;
margin-top: -34px;
/*size of the image*/
height: 34px;
width: 20px;
cursor: pointer;
}
我只需要将所有这些从中心向左偏移 25%，并为表单保留右侧屏幕的 50%。
最佳答案
我跳过了你的大部分问题并专注于标题(和你的最后一行文字)。 我写了一个函数，而不是 map.setCenter(marker.getPosition())，而是读取 map 的宽度，不是以米而是以度为单位。 然后我将中心设置为标记右侧的一个点。偏移量是 map 宽度的 1/4。
所以我们需要找到那个点，然后以那个点为中心。 我把它放在一个函数中，这样你就可以在你的代码中使用它(乍一看你的代码)。
这对你有用吗？ 例如，我选择了一些名称不带重音符号的标记，这些标记不在我的键盘上。
<head>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=INSERT_YOU_API_KEY_HERE" async defer></script>
<script>
var map;
var markers = [];
var venues = [
{name: 'Hard Rock Cafe', lat: 42.440872894381336, lng: 19.243852126140837},
{name: 'Hospital', lat: 42.43778998082812, lng: 19.24720468486862},
{name: 'CRNE Gore', lat: 42.443011545449124, lng: 19.240621744796726},
];
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(42.4405026181028, 19.24323633505709),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
for(var i in venues) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(venues[i].lat, venues[i].lng),
title: venues[i].name,
map: map
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
var markerPosition = this.getPosition();
var newCenter = centerWithOffset(markerPosition);
map.setCenter(newCenter);
// if you need to know which marker was clicked on:
// you might need this index to set the data of the infoWindow
var i = markers.indexOf(this);
document.getElementById("display").innerHTML = "marker " + i + " was clicked on";
});
}
google.maps.event.addListener(map, 'center_changed', function () {
document.getElementById("display").innerHTML = map.getCenter().toString();
});
}
function centerWithOffset(markerPosition) {
// rather than this center, we want a new center point that is offset by 1 / 4 of the width of the map to the right.
// @see https://stackoverflow.com/questions/6910847/get-boundaries-longitude-and-latitude-from-current-zoom-google-maps
var bounds = map.getBounds();
var ne = bounds.getNorthEast(); // LatLng of the north-east corner
var sw = bounds.getSouthWest(); // LatLng of the south-west corder
// calculate width
var width = ne.lng() - sw.lng();
// now apply this offset
var newCenter = new google.maps.LatLng(
markerPosition.lat(),
(markerPosition.lng() + (width / 4))
);
return newCenter;
}
</script>
<style>
#map {
width: 700px;
height: 300px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="display"></div>
</body>
关于javascript - 偏移谷歌地图并修复标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49447158/