Google maps 谷歌地图:中心自动打开信息窗口
我有一个自动打开的信息窗口,我想在我的谷歌地图中心 我不想把焦点放在标记本身上,而是标记加上信息窗口,因为如果单击“打开”而不是默认打开该框,它会自动执行此操作 这是我的密码:Google maps 谷歌地图:中心自动打开信息窗口,google-maps,google-maps-api-3,infowindow,Google Maps,Google Maps Api 3,Infowindow,我有一个自动打开的信息窗口,我想在我的谷歌地图中心 我不想把焦点放在标记本身上,而是标记加上信息窗口,因为如果单击“打开”而不是默认打开该框,它会自动执行此操作 这是我的密码: <script> function initMap() { var occ = {lat: 45.5280879, lng: -122.6630186}; var map = new google.maps.Map(document.getElementById('map'),
<script>
function initMap() {
var occ = {lat: 45.5280879, lng: -122.6630186};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
draggable: false,
scrollwheel: false,
center: occ
});
var contentString = '<div id="content" style="font-family: Poppins, sans-serif; padding: 1em;">'+
'<div id="siteNotice">'+
'</div>'+
'<h4 style="margin-bottom: .125em;">The Oregon Convention Center</h4>'+
'<p>777 NE Martin Luther King Jr Blvd<br>'+
'Portland, OR 97232<br>'+
'<a href="https://www.google.com/maps/dir//Oregon+Convention+Center,+777+NE+Martin+Luther+King+Jr+Blvd,+Portland,+OR+97232,+United+States/@45.5280879,-122.6630186,15z/data=!4m12!1m3!3m2!1s0x0:0x610cf37babf5b9df!2sOregon+Convention+Center!4m7!1m0!1m5!1m1!1s0x5495a0adc5ff1af5:0x610cf37babf5b9df!2m2!1d-122.6630186!2d45.5280879" target="_blank">Get directions</a></p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
pixelOffset: new google.maps.Size(0, 15),
});
var marker = new google.maps.Marker({
position: occ,
map: map,
title: 'The Oregon Convention Center',
});
infowindow.open(map, marker);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
</script>
函数initMap(){
var occ={lat:45.5280879,液化天然气:-122.6630186};
var map=new google.maps.map(document.getElementById('map'){
缩放:14,
可拖动:错误,
滚轮:错误,
中心:occ
});
var contentString=''+
''+
''+
“俄勒冈州会议中心”+
“小马丁·路德·金大道东北777号
”+
“波特兰,或97232
”+
“”+
'';
var infowindow=new google.maps.infowindow({
content:contentString,
pixelOffset:新的google.maps.Size(0,15),
});
var marker=new google.maps.marker({
职位:货币监理署,
地图:地图,
标题:“俄勒冈州会议中心”,
});
信息窗口。打开(地图、标记);
google.maps.event.addDomListener(窗口,“调整大小”,函数(){
var center=map.getCenter();
google.maps.event.trigger(map,“resize”);
地图设置中心(中心);
});
}
小提琴:
如何做到这一点?基于此答案:
创建一个将中心偏移一些像素的函数:
function map_recenter(map,latlng,offsetx,offsety) {
var point1 = map.getProjection().fromLatLngToPoint(
(latlng instanceof google.maps.LatLng) ? latlng : map.getCenter()
);
var point2 = new google.maps.Point(
( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(2, map.getZoom()) ) || 0,
( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(2, map.getZoom()) ) || 0
);
map.setCenter(map.getProjection().fromPointToLatLng(new google.maps.Point(
point1.x - point2.x,
point1.y + point2.y
)));
}
使用projection\u changed
事件调用此函数(因为map.getProjection()
在此事件之前不可用):
工作小提琴:
注意:
我已将Y偏移设置为-100。如果您知道信息窗口的高度(在本例中为155px),则可以更精确地传递该值-我猜这类似于
(infoWindow.height+infoWindow.pixelOffset/2)
干得好,伊万。这正是我要找的。谢谢很高兴听到这个,杰夫。请将我的回答标记为已接受:
google.maps.event.addListenerOnce(map,"projection_changed", function() {
map_recenter(map, occ, 0, -100);
});