Google Maps API v3 InfoWindow首先出现在错误的位置，然后正确加载

时间：2015-07-01 21:21:11

标签： javascript google-maps google-maps-api-3

See this page

出于某种原因，在加载地图的第一秒，InfoWindow错误地出现在左边缘，然后快速出现在地图的正确中间位置。我希望InfoWindow在加载时自动位于地图的中间。有什么方法可以解决这个粗略的转变吗？我的代码中的某些内容是否有问题？似乎装载应该比这更顺畅。 

<div id="map-canvas"></div>
    <script>
        function initialize() {
            var myLatlng    = new google.maps.LatLng(29.950217, -90.075517);
            var centerPos   = new google.maps.LatLng(29.952365, -90.075853);
            var mapOptions  = {
                        zoom        : 15,
                        center      : centerPos,
                        styles      : [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"administrative","elementType":"labels","stylers":[{"saturation":"-100"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"gamma":"0.75"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"lightness":"-37"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f9f9f9"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"40"},{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-37"}]},{"featureType":"landscape.natural","elementType":"labels.text.stroke","stylers":[{"saturation":"-100"},{"lightness":"100"},{"weight":"2"}]},{"featureType":"landscape.natural","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"80"}]},{"featureType":"poi","elementType":"labels","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"lightness":"-4"},{"saturation":"-100"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"},{"visibility":"on"},{"saturation":"-95"},{"lightness":"62"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road","elementType":"labels","stylers":[{"saturation":"-100"},{"gamma":"1.00"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"gamma":"0.50"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"gamma":"0.50"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"},{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"lightness":"-13"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"lightness":"0"},{"gamma":"1.09"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"},{"saturation":"-100"},{"lightness":"47"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"lightness":"-12"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"},{"lightness":"77"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":"-5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"saturation":"-100"},{"lightness":"-15"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"lightness":"47"},{"saturation":"-100"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"water","elementType":"geometry","stylers":[{"saturation":"53"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":"-42"},{"saturation":"17"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":"61"}]}]
                    };

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            //content within the popup
            var contentString = '<div id="mapContent">'+
                        '<div id="siteNotice">'+
                        '</div>'+
                        '<h1 id="firstHeading" class="firstHeading">Blanchard Systems</h1>'+
                        '<div id="bodyContent">'+
                        '<p><a href="https://maps.google.com?daddr=Blanchard+Systems+1100+Poydras+Street+New+Orleans+LA+70163">Click here for directions</a>'+
                        '<p><b>Address:</b> 1100 Poydras Street, New Orleans, LA 70163. Suite 1230.</p>'+
                        '</div>'+
                        '</div>';

            //the info window
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            //the marker on the map
            var marker = new google.maps.Marker({
                position    : myLatlng,
                map         : map,
                title       : 'Blanchard Systems'
            });

            //when clicking the marker, open the info window
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

            // Resize stuff...
            google.maps.event.addDomListener(window, "resize", function() {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
            });

            //auto open info window
            infowindow.open(map,marker);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        // end google maps 
    </script>

2 个答案:

答案 0 :(得分：1)

在地图空闲后，使用现有的点击事件打开infowindow：

//auto open info window
google.maps.event.addListenerOnce(map, 'idle', function () {
    google.maps.event.trigger(marker, 'click');
});

fiddle

代码段

＆＃13;
＆＃13; 
function initialize() {
  var myLatlng = new google.maps.LatLng(29.950217, -90.075517);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    styles: mapStyles
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  //content within the popup
  var contentString = '<div id="mapContent">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Blanchard Systems</h1>' +
    '<div id="bodyContent">' +
    '<p><a href="https://maps.google.com?daddr=Blanchard+Systems+1100+Poydras+Street+New+Orleans+LA+70163">Click here for directions</a>' +
    '<p><b>Address:</b> 1100 Poydras Street, New Orleans, LA 70163. Suite 1230.</p>' +
    '</div>' +
    '</div>';

  //the info window
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  //the marker on the map
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Blanchard Systems'
  });

  //when clicking the marker, open the info window
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });

  // Resize stuff...
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });

  //auto open info window
  google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(marker, 'click');
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
var mapStyles = [{
  "featureType": "administrative",
  "elementType": "all",
  "stylers": [{
    "visibility": "on"
  }, {
    "lightness": 33
  }]
}, {
  "featureType": "administrative",
  "elementType": "labels",
  "stylers": [{
    "saturation": "-100"
  }]
}, {
  "featureType": "administrative",
  "elementType": "labels.text",
  "stylers": [{
    "gamma": "0.75"
  }]
}, {
  "featureType": "administrative.neighborhood",
  "elementType": "labels.text.fill",
  "stylers": [{
    "lightness": "-37"
  }]
}, {
  "featureType": "landscape",
  "elementType": "geometry",
  "stylers": [{
    "color": "#f9f9f9"
  }]
}, {
  "featureType": "landscape.man_made",
  "elementType": "geometry",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "40"
  }, {
    "visibility": "off"
  }]
}, {
  "featureType": "landscape.natural",
  "elementType": "labels.text.fill",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "-37"
  }]
}, {
  "featureType": "landscape.natural",
  "elementType": "labels.text.stroke",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "100"
  }, {
    "weight": "2"
  }]
}, {
  "featureType": "landscape.natural",
  "elementType": "labels.icon",
  "stylers": [{
    "saturation": "-100"
  }]
}, {
  "featureType": "poi",
  "elementType": "geometry",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "80"
  }]
}, {
  "featureType": "poi",
  "elementType": "labels",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "0"
  }]
}, {
  "featureType": "poi.attraction",
  "elementType": "geometry",
  "stylers": [{
    "lightness": "-4"
  }, {
    "saturation": "-100"
  }]
}, {
  "featureType": "poi.park",
  "elementType": "geometry",
  "stylers": [{
    "color": "#c5dac6"
  }, {
    "visibility": "on"
  }, {
    "saturation": "-95"
  }, {
    "lightness": "62"
  }]
}, {
  "featureType": "poi.park",
  "elementType": "labels",
  "stylers": [{
    "visibility": "on"
  }, {
    "lightness": 20
  }]
}, {
  "featureType": "road",
  "elementType": "all",
  "stylers": [{
    "lightness": 20
  }]
}, {
  "featureType": "road",
  "elementType": "labels",
  "stylers": [{
    "saturation": "-100"
  }, {
    "gamma": "1.00"
  }]
}, {
  "featureType": "road",
  "elementType": "labels.text",
  "stylers": [{
    "gamma": "0.50"
  }]
}, {
  "featureType": "road",
  "elementType": "labels.icon",
  "stylers": [{
    "saturation": "-100"
  }, {
    "gamma": "0.50"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry",
  "stylers": [{
    "color": "#c5c6c6"
  }, {
    "saturation": "-100"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry.stroke",
  "stylers": [{
    "lightness": "-13"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "labels.icon",
  "stylers": [{
    "lightness": "0"
  }, {
    "gamma": "1.09"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry",
  "stylers": [{
    "color": "#e4d7c6"
  }, {
    "saturation": "-100"
  }, {
    "lightness": "47"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry.stroke",
  "stylers": [{
    "lightness": "-12"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "labels.icon",
  "stylers": [{
    "saturation": "-100"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry",
  "stylers": [{
    "color": "#fbfaf7"
  }, {
    "lightness": "77"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry.fill",
  "stylers": [{
    "lightness": "-5"
  }, {
    "saturation": "-100"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry.stroke",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "-15"
  }]
}, {
  "featureType": "transit.station.airport",
  "elementType": "geometry",
  "stylers": [{
    "lightness": "47"
  }, {
    "saturation": "-100"
  }]
}, {
  "featureType": "water",
  "elementType": "all",
  "stylers": [{
    "visibility": "on"
  }, {
    "color": "#acbcc9"
  }]
}, {
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [{
    "saturation": "53"
  }]
}, {
  "featureType": "water",
  "elementType": "labels.text.fill",
  "stylers": [{
    "lightness": "-42"
  }, {
    "saturation": "17"
  }]
}, {
  "featureType": "water",
  "elementType": "labels.text.stroke",
  "stylers": [{
    "lightness": "61"
  }]
}];
＆＃13; 
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
＆＃13; 
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在position: centerPos,之上添加content: contentString。

此外，您应该删除var myLatlng = new google.maps.LatLng(29.950217, -90.075517);，因为您已准备好使用centerPos定义它。如果删除了myLatLng，请不要忘记在标记变量中用position : myLatlng,替换position: centerPos,。

片段

function initialize() {
  var centerPos = new google.maps.LatLng(29.952365, -90.075853);
  var mapOptions = {
    zoom: 13,
    center: centerPos,
    styles: [{
      "featureType": "administrative",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      }, {
        "lightness": 33
      }]
    }, {
      "featureType": "administrative",
      "elementType": "labels",
      "stylers": [{
        "saturation": "-100"
      }]
    }, {
      "featureType": "administrative",
      "elementType": "labels.text",
      "stylers": [{
        "gamma": "0.75"
      }]
    }, {
      "featureType": "administrative.neighborhood",
      "elementType": "labels.text.fill",
      "stylers": [{
        "lightness": "-37"
      }]
    }, {
      "featureType": "landscape",
      "elementType": "geometry",
      "stylers": [{
        "color": "#f9f9f9"
      }]
    }, {
      "featureType": "landscape.man_made",
      "elementType": "geometry",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "40"
      }, {
        "visibility": "off"
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "labels.text.fill",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "-37"
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "100"
      }, {
        "weight": "2"
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "labels.icon",
      "stylers": [{
        "saturation": "-100"
      }]
    }, {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "80"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "0"
      }]
    }, {
      "featureType": "poi.attraction",
      "elementType": "geometry",
      "stylers": [{
        "lightness": "-4"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [{
        "color": "#c5dac6"
      }, {
        "visibility": "on"
      }, {
        "saturation": "-95"
      }, {
        "lightness": "62"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "labels",
      "stylers": [{
        "visibility": "on"
      }, {
        "lightness": 20
      }]
    }, {
      "featureType": "road",
      "elementType": "all",
      "stylers": [{
        "lightness": 20
      }]
    }, {
      "featureType": "road",
      "elementType": "labels",
      "stylers": [{
        "saturation": "-100"
      }, {
        "gamma": "1.00"
      }]
    }, {
      "featureType": "road",
      "elementType": "labels.text",
      "stylers": [{
        "gamma": "0.50"
      }]
    }, {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [{
        "saturation": "-100"
      }, {
        "gamma": "0.50"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [{
        "color": "#c5c6c6"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry.stroke",
      "stylers": [{
        "lightness": "-13"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "labels.icon",
      "stylers": [{
        "lightness": "0"
      }, {
        "gamma": "1.09"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry",
      "stylers": [{
        "color": "#e4d7c6"
      }, {
        "saturation": "-100"
      }, {
        "lightness": "47"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry.stroke",
      "stylers": [{
        "lightness": "-12"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [{
        "saturation": "-100"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry",
      "stylers": [{
        "color": "#fbfaf7"
      }, {
        "lightness": "77"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [{
        "lightness": "-5"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry.stroke",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "-15"
      }]
    }, {
      "featureType": "transit.station.airport",
      "elementType": "geometry",
      "stylers": [{
        "lightness": "47"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#acbcc9"
      }]
    }, {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [{
        "saturation": "53"
      }]
    }, {
      "featureType": "water",
      "elementType": "labels.text.fill",
      "stylers": [{
        "lightness": "-42"
      }, {
        "saturation": "17"
      }]
    }, {
      "featureType": "water",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "lightness": "61"
      }]
    }]
  };



  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  //the marker on the map
  var marker = new google.maps.Marker({
    position: centerPos,
    map: map,
    title: 'Blanchard Systems'

  });

  //content within the popup
  var contentString = '<div id="mapContent">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Blanchard Systems</h1>' +
    '<div id="bodyContent">' +
    '<p><a href="https://maps.google.com?daddr=Blanchard+Systems+1100+Poydras+Street+New+Orleans+LA+70163">Click here for directions</a>' +
    '<p><b>Address:</b> 1100 Poydras Street, New Orleans, LA 70163. Suite 1230.</p>' +
    '</div>' +
    '</div>';


  //the info window
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    position: centerPos,
  });

  //when clicking the marker, open the info window
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });

  // Resize stuff...
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });

  //auto open info window
  infowindow.open(map, marker);
}

initialize();
  html,
  body,
  #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

相关问题
最新问题