JavaScript 的全新功能,使用 Google Maps API v3 w/ custom fitbounds (
Completely new to javascript and using Google Maps API v3 w/ custom fitbounds (myFitBounds)
我一直在通过在线示例和反复试验自学Javascript一段时间了,但我遇到了一个我不太理解的问题,它让我非常疯狂。请原谅任何和所有语言/术语的混乱和缺乏基本的编码知识。
我有一个对谷歌地图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>
如果这对你们所有人来说都是废话,我真的很抱歉,但我非常感谢在我了解更多有关此方面的帮助和时间。
难以
回事!
置信。我所要做的就是一些简单的改变,当然是改变:
map.myFitBounds(map, bounds);
自
myFitBounds(map, bounds);
对于一个愚蠢的第一个SO问题来说,这是怎么
相关文章:
- Javascript Custom Base32
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 标记的实时更新,无需加载页面谷歌地图API V3
- 谷歌地图v3标记没有显示ie8和9
- 谷歌地图停止显示点v3
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 如何在多承诺链中处理谷歌地图API V3事件
- 谷歌地图API v3:Initial View is Fine,but Gray Box with No Map if
- 使用Google Maps JavaScript API v3和Geocoding API映射多个位置
- 使用谷歌地图api v3自动完成字段(法国大道、邮编、城市)
- 性能与模块化:将JS集成到PHP或单独的custom.JS中
- 更改内容信息窗口映射v3
- 谷歌地图v3:当函数'失败'呼叫
- 谷歌地图V3
- 谷歌地图V3-我无法调和关闭
- 如何在谷歌地图api v3中获得无公里驾驶距离
- 如何在Maps API v3.中更改多段线的路径
- 谷歌地图API v3:处理使用限制限制
- JavaScript 的全新功能,使用 Google Maps API v3 w/ custom fitbounds (