Javascript 谷歌地图点击屏幕底部的标记平移
我正在做一个谷歌地图项目。我们使用自定义覆盖作为标记弹出窗口。弹出窗口应该有点大。所以我想,在点击标记时,让地图平移,使标记距离视口底部大约50像素,以便为弹出窗口留出空间 目前,我只是将其平移到标记的纵横比Javascript 谷歌地图点击屏幕底部的标记平移,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在做一个谷歌地图项目。我们使用自定义覆盖作为标记弹出窗口。弹出窗口应该有点大。所以我想,在点击标记时,让地图平移,使标记距离视口底部大约50像素,以便为弹出窗口留出空间 目前,我只是将其平移到标记的纵横比 google.maps.event.addDomListener(div, "click", function(e) { var x = e.x, y = $(div).offset(), window
google.maps.event.addDomListener(div, "click", function(e) {
var x = e.x,
y = $(div).offset(),
windowHeight = $(window).height(),
windowWidth = $(window).width();
if(!$(div).find('.ryan').hasClass("scaleUp")){
map.panTo({lat: args.location.lat, lng: args.location.lng})
var top = $(div).offset().top, mapHeight = $('#content-wrapper').height();
$(div).append(buildBubble(self.getHcpCount())).css("z-index", markerZindex++)
var bubble = $(this).find('.ryan');
var windowPercentage = .5;
bubble.css({
"width": windowWidth * windowPercentage,
"height": windowHeight * windowPercentage,
"top": 0,
"left": 0,
"margin-top": -1 * windowWidth * windowPercentage / 2,
"margin-left": -1 * windowWidth * windowPercentage / 2 + $(this).width() / 2
});
bubble.find('.bubble-body').css({
"height": bubble.height() - bubble.find('.bubble-header').height()
});
bubble.find('.bubble-section').css({
"width": (bubble.width() /*- arrowLeft - arrowRight*/) / 2 - 5
});
bubble.find('.hcps-wrapper').css({
"width": (bubble.width() /*- arrowLeft - arrowRight*/)
})
attachBubbleHandler($(div));
map.setOptions({disableDoubleClickZoom: true });
}else{
map.setOptions({disableDoubleClickZoom: false });
}
$(div).find('.ryan').toggleClass("scaleUp", function(){
if(!$(this).hasClass('scaleUp')){
$(this).unbind().remove();
}
});
});
//this handles the zIndex problem with clusters being over marker bubbles
this.getPanes().floatPane.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
//LOCATION OF THE TOP AND LEFT POINTS OF THE BUBBLE
if (point) {
div.style.left = (point.x - 20) + 'px';
div.style.top = (point.y) + 'px';
}
};//END DRAW MARKER
简单的解决方案1:
如果不介意将标记水平居中对齐:
首先将地图中心设置为标记的位置,然后平移地图一半的div height减去从底部的偏移:
marker.addListener('click', function(){
var divHeightOfTheMap = document.getElementById('map').clientHeight;
var offSetFromBottom = 50;
map.setCenter(marker.getPosition());
map.panBy(0, -(divHeightOfTheMap / 2 - offSetFromBottom));
});
marker.addListener('click', function(){
var divHeightOfTheMap = document.getElementById('map').clientHeight;
var offSetFromBottom = 50;
map.setCenter(new google.maps.LatLng(marker.getPosition().lat(), map.getCenter().lng()));
map.panBy(0, -(divHeightOfTheMap / 2 - offSetFromBottom));
});
简单的解决方案2:
如果不希望将标记水平居中对齐:
首先将地图中心设置为标记的纬度和地图的中心经度,然后平移地图的一半div height减去从底部的偏移量:
marker.addListener('click', function(){
var divHeightOfTheMap = document.getElementById('map').clientHeight;
var offSetFromBottom = 50;
map.setCenter(marker.getPosition());
map.panBy(0, -(divHeightOfTheMap / 2 - offSetFromBottom));
});
marker.addListener('click', function(){
var divHeightOfTheMap = document.getElementById('map').clientHeight;
var offSetFromBottom = 50;
map.setCenter(new google.maps.LatLng(marker.getPosition().lat(), map.getCenter().lng()));
map.panBy(0, -(divHeightOfTheMap / 2 - offSetFromBottom));
});
解决方案3:
使用空覆盖计算像素位置:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Pan to bottom</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var marker;
var map;
var overlay;
divOverlay.prototype = new google.maps.OverlayView();
function initMap() {
var mLatLng = {lat: 40.758984, lng: -73.985131};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: mLatLng
});
var marker = new google.maps.Marker({
position: mLatLng,
map: map
});
overlay = new divOverlay(map, marker);
overlay.setMap(map);
marker.addListener('click', function(){
overlay.panMarkerToBottom(50, true); // (Offset from bottom, want horizontally center?)
});
}
function divOverlay(map, marker) {
this.bounds_ = map.getBounds();
this.map_ = map;
this.div_ = null;
this.marker_ = marker;
}
divOverlay.prototype.onAdd = function() {
this.div_ = document.createElement('div');
this.getPanes().overlayLayer.appendChild(this.div_);
};
divOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
divOverlay.prototype.draw = function() {
};
divOverlay.prototype.panMarkerToBottom = function(offSetFromBottom, isCenter) {
if (offSetFromBottom){
var overlayProjection = this.getProjection();
var mPos = overlayProjection.fromLatLngToContainerPixel(this.marker_.getPosition());
var mapDiv = this.map_.getDiv();
var mapWidth = mapDiv.offsetWidth;
var mapHeight = mapDiv.offsetHeight;
var panX = 0;
if (isCenter) {
panX = -(mapWidth / 2 - mPos.x);
};
var panY = -(mapHeight - mPos.y - offSetFromBottom);
this.map_.panBy(panX , panY);
}
};
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
我希望这有帮助 简单的解决方案1:
如果不介意将标记水平居中对齐:
首先将地图中心设置为标记的位置,然后平移地图一半的div height减去从底部的偏移:
marker.addListener('click', function(){
var divHeightOfTheMap = document.getElementById('map').clientHeight;
var offSetFromBottom = 50;
map.setCenter(marker.getPosition());
map.panBy(0, -(divHeightOfTheMap / 2 - offSetFromBottom));
});
marker.addListener('click', function(){
var divHeightOfTheMap = document.getElementById('map').clientHeight;
var offSetFromBottom = 50;
map.setCenter(new google.maps.LatLng(marker.getPosition().lat(), map.getCenter().lng()));
map.panBy(0, -(divHeightOfTheMap / 2 - offSetFromBottom));
});
简单的解决方案2:
如果不希望将标记水平居中对齐:
首先将地图中心设置为标记的纬度和地图的中心经度,然后平移地图的一半div height减去从底部的偏移量:
marker.addListener('click', function(){
var divHeightOfTheMap = document.getElementById('map').clientHeight;
var offSetFromBottom = 50;
map.setCenter(marker.getPosition());
map.panBy(0, -(divHeightOfTheMap / 2 - offSetFromBottom));
});
marker.addListener('click', function(){
var divHeightOfTheMap = document.getElementById('map').clientHeight;
var offSetFromBottom = 50;
map.setCenter(new google.maps.LatLng(marker.getPosition().lat(), map.getCenter().lng()));
map.panBy(0, -(divHeightOfTheMap / 2 - offSetFromBottom));
});
解决方案3:
使用空覆盖计算像素位置:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Pan to bottom</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var marker;
var map;
var overlay;
divOverlay.prototype = new google.maps.OverlayView();
function initMap() {
var mLatLng = {lat: 40.758984, lng: -73.985131};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: mLatLng
});
var marker = new google.maps.Marker({
position: mLatLng,
map: map
});
overlay = new divOverlay(map, marker);
overlay.setMap(map);
marker.addListener('click', function(){
overlay.panMarkerToBottom(50, true); // (Offset from bottom, want horizontally center?)
});
}
function divOverlay(map, marker) {
this.bounds_ = map.getBounds();
this.map_ = map;
this.div_ = null;
this.marker_ = marker;
}
divOverlay.prototype.onAdd = function() {
this.div_ = document.createElement('div');
this.getPanes().overlayLayer.appendChild(this.div_);
};
divOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
divOverlay.prototype.draw = function() {
};
divOverlay.prototype.panMarkerToBottom = function(offSetFromBottom, isCenter) {
if (offSetFromBottom){
var overlayProjection = this.getProjection();
var mPos = overlayProjection.fromLatLngToContainerPixel(this.marker_.getPosition());
var mapDiv = this.map_.getDiv();
var mapWidth = mapDiv.offsetWidth;
var mapHeight = mapDiv.offsetHeight;
var panX = 0;
if (isCenter) {
panX = -(mapWidth / 2 - mPos.x);
};
var panY = -(mapHeight - mPos.y - offSetFromBottom);
this.map_.panBy(panX , panY);
}
};
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
我希望这有帮助 如果有人投了反对票,他们需要告诉自己为什么这样做。如果有人投了反对票,他们需要告诉自己为什么这样做。