一段时间以来,我一直在通过在线示例和反复试验自学 Javascript,但我遇到了一个我完全不理解的问题,这让我非常抓狂。请原谅语言/术语方面的任何和所有错误以及缺乏基本的编码知识。
我对在我的个人网站上运行的 Google Maps API 进行了有效调用,但我讨厌fitBounds() 将45px 的填充添加到地图框的边界的方式。我在同一个线程上阅读了一个潜在的解决方案,该解决方案使用自定义的东西重新计算 fitBounds(),称为 myFitBounds,这也详细说明了我认为是用户的站点。
所以我试图将他的代码插入到我的javascript调用中,但我完全没有用它。当我在调试器中运行脚本时,出现错误:
undefined is not a function (evaluating 'map.myFitBounds(map, bounds)')
现在,我完全确定我没有正确调用它,不知何故。但是由于我没有接受过任何关于 javascript 的培训,而且我找不到一个如何在 GMaps API 环境中调用这个特定自定义函数的示例,所以我对我需要做什么感到非常困惑。
这是我的脚本标签之间的代码。myFitBounds() 调用位于代码中与运行示例中的 fitBounds() 调用相同的位置。
<script>
function map_initialize() {
var places = [
{
name: 'Boston',
display: '<div id="infowindowcontent">'+
'<div class="iwtitle">BOS</div><div class="iwcity"><a href="airportinfo.cfm?airport=BOS">Boston</a></div>'+
'</div>',
latlng: new google.maps.LatLng(42.36566960626233, -71.00959794628909)
},
{
name: 'New York City',
display: '<div id="infowindowcontent">'+
'<div class="iwtitle">LGA</div><div class="iwcity"><a href="airportinfo.cfm?airport=LGA">New York City</a></div>'+
'</div>',
latlng: new google.maps.LatLng(40.776941170264045, -73.87393968212893)
},
{
name: 'Orlando',
display: '<div id="infowindowcontent">'+
'<div class="iwtitle">MCO</div><div class="iwcity"><a href="airportinfo.cfm?airport=MCO">Orlando</a></div>'+
'</div>',
latlng: new google.maps.LatLng(28.43121198017089, -81.30807893383792)
}
];
var mapoptions = {
center: new google.maps.LatLng(0, 0),
zoom: 0,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("mapdiv"),
mapoptions);
var infowindow = new google.maps.InfoWindow({
maxWidth: 160
});
var markers = new Array();
/*
Markers
*/
for (var i = 0; i < places.length; i++) {
var marker = new google.maps.Marker({
position: places[i].latlng,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
strokeColor: 'black'
},
map: map,
title: places[i].name,
content: places[i].name
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(places[i].display);
infowindow.open(map, marker);
}
})(marker, i));
}
/*
Fit to Bounds
*/
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < places.length; i++) {
bounds.extend(places[i].latlng);
}
/*
Custom Fit to Bounds
*/
function myFitBounds(map, bounds) {
map.fitBounds(bounds); // calling fitBounds() here to center the map for the bounds
var overlayHelper = new google.maps.OverlayView();
overlayHelper.draw = function () {
if (!this.ready) {
var extraZoom = getExtraZoom(this.getProjection(), bounds, map.getBounds());
if (extraZoom > 0) {
map.setZoom(map.getZoom() + extraZoom);
}
this.ready = true;
google.maps.event.trigger(this, 'ready');
}
};
overlayHelper.setMap(map);
}
function getExtraZoom(projection, expectedBounds, actualBounds) {
// in: LatLngBounds bounds -> out: height and width as a Point
function getSizeInPixels(bounds) {
var sw = projection.fromLatLngToContainerPixel(bounds.getSouthWest());
var ne = projection.fromLatLngToContainerPixel(bounds.getNorthEast());
return new google.maps.Point(Math.abs(sw.y - ne.y), Math.abs(sw.x - ne.x));
}
var expectedSize = getSizeInPixels(expectedBounds),
actualSize = getSizeInPixels(actualBounds);
if (Math.floor(expectedSize.x) == 0 || Math.floor(expectedSize.y) == 0) {
return 0;
}
var qx = actualSize.x / expectedSize.x;
var qy = actualSize.y / expectedSize.y;
var min = Math.min(qx, qy);
if (min < 1) {
return 0;
}
return Math.floor(Math.log(min) / Math.LN2 /* = log2(min) */);
}
/*
* Starter Marker in Gold
*
*/
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.776941170264045, -73.87393968212893),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3.5,
strokeColor: 'gold'
},
draggable: false,
map: map
});
/*
* Adds the Flight Paths in great circles
*
*/
var flightPath = new google.maps.Polyline({path: [new google.maps.LatLng(40.776941170264045, -73.87393968212893),new google.maps.LatLng(42.36566960626233, -71.00959794628909)], strokeColor: "#000000", strokeOpacity: 1, strokeWeight: 2, geodesic: true });
flightPath.setMap(map);
var flightPath = new google.maps.Polyline({path: [new google.maps.LatLng(28.43121198017089, -81.30807893383792),new google.maps.LatLng(40.776941170264045, -73.87393968212893)], strokeColor: "#000000", strokeOpacity: 1, strokeWeight: 2, geodesic: true });
flightPath.setMap(map);
map.myFitBounds(map, bounds);
}
google.maps.event.addDomListener(window, 'load', map_initialize);
</script>
如果这对你们所有人来说都是一团糟,我真的很抱歉,但我非常感谢在我了解更多相关信息时提供的帮助和时间。