参考：http://econym.org.uk/gmap/range.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
>
<head
>
<title
>Google Maps</title
>
<script
src
="
http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw
"
type
="text/javascript"
></script
>
</head
>
<body
onunload
="GUnload()"
>
<!-- the div where the map will be displayed -->
<div
id
="map"
style
="width: 550px; height: 700px"
></div
>
<a
href
="
range.htm
"
>Back to the tutorial page</a
>
<!-- fail nicely if the browser has no Javascript -->
<noscript
><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript
>
<script
type
="text/javascript"
>
//<![CDATA[
// Check to see if this browser can run the Google API
if (GBrowserIsCompatible()) {
// A function to create the marker and set up the event window
// Dont try to unroll this function. It has to be here for the function closure
// Each instance of the function preserves the contends of a different instance
// of the "marker" and "html" variables which will be needed later when the event triggers.
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
// ====== Restricting the range of Zoom Levels =====
// Get the list of map types
var mt = map.getMapTypes();
// Overwrite the getMinimumResolution() and getMaximumResolution() methods
for (var i=0; i<mt.length; i++) {
mt[i].getMinimumResolution = function() {return 7;}
mt[i].getMaximumResolution = function() {return 11;}
}
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(53.3,-1.6), 7);
// Set up markers with info windows
var point = new GLatLng(53.848964,-3.039463);
var marker = createMarker(point,"<b>Blackpool Community Church<\/b><br>Bispham Community Centre<br>Bispham Road<br>Blackpool")
map.addOverlay(marker);
var point = new GLatLng(51.503894,-3.191303);
var marker = createMarker(point,"<b>Cardiff All Nations Church<\/b><br>Sachville Avenue<br>Cardiff")
map.addOverlay(marker);
var point = new GLatLng(53.642126,-1.800942);
var marker = createMarker(point,"<b>Huddersfield Community Church<\/b><br>New Life Church<br>Jubilee Centre<br>Market Street<br>Huddersfield")
map.addOverlay(marker);
var point = new GLatLng(53.955930,-1.089173);
var marker = createMarker(point,"<b>York King's Church<\/b><br>The Priory Street Centre<br>15 Priory Street<br>York")
map.addOverlay(marker);
// Add a move listener to restrict the bounds range
GEvent.addListener(map, "move", function() {
checkBounds();
});
// The allowed region which the whole map must be within
var allowedBounds = new GLatLngBounds(new GLatLng(49.5,-10), new GLatLng(59,2.6));
// If the map position is out of range, move it back
function checkBounds() {
// Perform the check and return if OK
if (allowedBounds.contains(map.getCenter())) {
return;
}
// It`s not OK, so find the nearest allowed point and move there
var C = map.getCenter();
var X = C.lng();
var Y = C.lat();
var AmaxX = allowedBounds.getNorthEast().lng();
var AmaxY = allowedBounds.getNorthEast().lat();
var AminX = allowedBounds.getSouthWest().lng();
var AminY = allowedBounds.getSouthWest().lat();
if (X < AminX) {X = AminX;}
if (X > AmaxX) {X = AmaxX;}
if (Y < AminY) {Y = AminY;}
if (Y > AmaxY) {Y = AmaxY;}
//alert ("Restricting "+Y+" "+X);
map.setCenter(new GLatLng(Y,X));
}
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script
>
</body
>
</html
>
分享到：
相关推荐
谷歌地图下载器最新版-稻歌谷歌地图...1、大幅面截获Google Map上的地图、卫星影像、地形图、混合地图，拼接并存储为tif格式的图像，同时赋上精确的投影与坐标； 2、无幅面大小限制、海量下载、无缝拼接； 3.完全免费
使用google地图的反向地址解析功能，提供一个经纬度得到对应地址，或者给出模糊地址，得到经纬度，放在java后台代码中处理，这个使用的是Google的地理编码服务。一般而言数据量不大的情况使用是不限制的。按照Google...
稻歌Google Map截获器是目前国内最简便易用，专业的Google Map下载截图免费工具软件，可截获Google Map卫星影像、地图、地形图，海量下载，大幅面拼图，赋予精确的Google Map投影坐标。 本软件最大的特色是简单方便...
一、软件功能： 1、大幅面截获Google Map上的地图、卫星影像、地形图、混合地图，拼接并存储为tif格式的图像，同时赋上精确的投影与坐标； 2、无幅面大小限制、海量下载、无缝拼接；
1、大幅面截获Google Map 上的地图、卫星影像、地形图，拼接并存储为tif 格式的图像， 同时赋上精确的投影与坐标； 2、无幅面大小限制、海量下载、无缝拼接；
好用的遥感影像下载工具。 1、大幅面截获Google Map 上的地图、卫星影像、地形图，拼接并存储为tif 格式的图像，同时赋上精确的投影与坐标； 2、无幅面大小限制、海量下载、无缝拼接；
Mapper为地图设置了一个简单的GUI，用户可以在其中选择地图的位置和样式。 该地点将使用Google地理编码API转换为纬度/经度坐标。 map = Mapper( ' Oldenburg ' ); 该地图由从openstreetmap下载的图块组成。 每当更改...
全能电子地图下载器，是一个专门下载地图瓦片数据的工具，可以从Google地图,MapABC,SOSO地图,雅虎地图,必应地图,诺基亚地图等网络地图中下载瓦片地图（256x256的图片），并可无缝拼接成大图，是各居家旅行探险者的...
1、大幅面截获Google Map上的地图、卫星影像、地形图、混合地图，拼接并存储为tif格式的图像，同时赋上精确的投影与坐标； 2、无幅面大小限制、海量下载、无缝拼接； 3.完全免费
谷歌地图使用 nodeJS、googleMap 和 MongoDB 实现一个大学搜索项目维护了一个具有大学综合搜索功能的地图，并为这些大学的当前候选人提供了过渡视图。 为地图搜索功能编写原生Javascript AJAX代码（目前负责迁移到...
MapIt 在您的网站中嵌入Google地图的简便方法产品特点可自定义的Google地图（尺寸，缩放级别，地形类型等） 带有文本和自定义图标的多个标记。 路线处理标记和路线的事件（show，show_all，hide，hide_all）版权和...
React中的地图搜索介绍该项目演示了如何在React中使用第三方API（此处为Foursquare API）构建google map应用。 这个应用程序是使用“创建React应用程序”从头开始创建的，用于样板代码库。 显然，创建应用程序时，...
城市地图 突出显示的城市地图，仅在城市内部允许平移，缩放和标记拖动受限。 演示版 不要忘记将自己的Google Maps密钥放入constants.js... 限制地图在边界之外的拖动/平移。 限制标记拖动到我们的城市边界。 依存关系
粘糊糊的 交互式Google Maps for Python。 经过Python2.7和Python3.6测试。 GooMPy为Google Static Maps API提供了Python界面，可自动将地图图... 由于Google会限制您在给定时间内可以下载的磁贴数量，因此我们建议按
OpenStreetMap是一个社区构建的免费可编辑世界地图，其灵感来自维基百科的成功，维基百科的众包数据是开放的，并且没有专有的限制使用。 我们看到Craigslist和Foursquare使用它作为Google Maps的开源替代品的一些...
主要介绍了vue项目使用高德地图的定位及关键字搜索功能的实例代码，也是小编踩了无数坑总结出来的经验,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
创建一个简单的 BI 图表系统，以 Google Sheets 内容作为数据源，Google Map 作为地理地图基础。 此图表用作 Google 表格插件。 该项目计划在准备好后作为工作表插件发布。 渲染基于 。 地位 气泡图已准备就绪。 ...
1、大幅面截获Google Map上的地图、卫星影像、地形图，拼接并存储为tif格式的图像， 同时赋上精确的投影与坐标； 2、无幅面大小限制、海量下载、无缝拼接；
我们获取要映射的图像的 IMG 元素，然后使用 Canvas 生成渲染时 Google 地图使用的必要图块。 整个过程是在客户端用 Javascript 完成的。 最终，当 Web Workers 对 Canvas 获得更好的支持时，我们将使用它们来提高...
特点：Google Earth凭借其强大的技术实力和经验，以其操作简单、用户体验超群的优势吸引了全球近十分之一的人口使用。 发展历程：Google于2004年10月收购了Keyhole公司，随之次年6月推出Google Earth系列软件。...