Google地图:中心自动打开infoWindow

时间:2015-08-14 02:08:26

标签: google-maps google-maps-api-3 infowindow

我有一个自动打开的信息窗口,我想以Google地图为中心。

我不想以标记本身为中心,但是标记PLUS是infoWindow,因为如果框被点击打开而不是默认打开,它会自动执行。

这是我的代码:

    <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>

小提琴:http://jsfiddle.net/kz1hnec0/

我该怎么做?

1 个答案:

答案 0 :(得分:1)

基于这个答案:https://stackoverflow.com/a/10722973/1023562

创建一个将中心偏移一些像素的函数:

SELECT Truckname, 
       SUM(Year2013) Year2013, 
       SUM(Year2014) Year2014, 
       SUM(Year2015) Year2015 
FROM
(
  SELECT Truckname, NULL Year2013, NULL Year2014, COUNT(Field) Year2015
  FROM Trucks
  WHERE Year = '2015'
  UNION ALL
  SELECT Truckname, NULL Year2013, COUNT(Field) Year2014, NULL Year2015
  FROM Trucks
  WHERE Year = '2014'
  UNION ALL
  SELECT Truckname, COUNT(Field) Year2013, NULL Year2014, NULL Year2015
  FROM Trucks
  WHERE Year = '2013'
) 
GROUP BY Truckname

使用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_changed不可用):

map.getProjection()

工作小提琴:http://jsfiddle.net/kz1hnec0/4/

注意:

我已将Y偏移设置为-100。如果你知道你的信息窗口有多高(在这种情况下是155px),那么你可以更准确地传递这个值 - 我想这会像google.maps.event.addListenerOnce(map,"projection_changed", function() { map_recenter(map, occ, 0, -100); });