Google 地图类型详解及示例代码


Posted in Javascript onAugust 06, 2016

Google 地图类型

Google 地图- 基本地图类型

Google Maps API 中提供了以下地图类型:

1.MapTypeId.ROADMAP,用于显示默认的道路地图视图
2.MapTypeId.SATELLITE,用于显示 Google 地球卫星图片
3.MapTypeId.HYBRID,用于同时显示普通视图和卫星视图
4.MapTypeId.TERRAIN,用于根据地形信息显示实际地图。

要通过 Map 修改正在使用的地图类型,您可以为其设置 mapTypeId 属性:

var mapProp = {
 center:new google.maps.LatLng(51.508742,-0.120850),
 zoom:7,
 mapTypeId: google.maps.MapTypeId.HYBRID
};

或者动态修改 mapTypeId:

map.setMapTypeId(google.maps.MapTypeId.HYBRID);

Google 地图- 45° 图像

Google Maps API 针对特定位置支持特殊的 45° 图像。

此类高分辨率图像可提供朝向各基本方向(东南西北)的透视视图。对于支持的地图类型,这些图片还可提供更高的缩放级别。

现有的 google.maps.MapTypeId.SATELLITE 和 google.maps.MapTypeId.HYBRID 地图类型支持高缩放级别的 45° 透视图像(如果有的话)。如果您放大的位置拥有此类图像,那么这些地图类型将会自动通过以下方式更改其视图:

1.地图上现有的任何平移控件都将会变更为在现有的导航控件周围添加一个罗盘转轮。您可以通过该罗盘来更改任意 45° 图像的方向,方法是:拖动该罗盘转轮,然后将方向对准包含图像的最近支持方向。

2.一个旋转控件将会间隙显示在现有的平移和缩放控件之间,它可用于将图像围绕支持方向旋转。旋转控件仅支持顺时针方向旋转。

3.以当前位置为中心的 45° 透视图像将会替代卫星图像或混合图像。默认情况下,此类视图会朝向北方。如果您缩小地图,则地图会重新显示默认的卫星图像或混合图像。

4.MapType 控件将启用子菜单切换控件,用于显示 45° 图像。

注意:缩小显示 45° 图像的地图类型将会还原所有更改,并重新构建原始地图类型。

以下示例显示了意大利威尼斯公爵宫45°视图:

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(45.434046,12.340284);

function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:18,
 mapTypeId:google.maps.MapTypeId.HYBRID
 };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

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

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

提示:Google 正在不断地为更多城市添加 45° 图像。有关最新信息,请参阅 Google 地图上的 45° 图像列表。

Google 地图 - 启用和停用 45° 图像 - setTilt(0)

您可以通过在 Map 对象上调用 setTilt(0) 来停用 45° 图像。要启用适用于支持的地图类型的 45° 透视图像,请调用 setTilt(45)。

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
​
<script>
var myCenter=new google.maps.LatLng(45.434046,12.340284);
​
function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:18,
 mapTypeId:google.maps.MapTypeId.HYBRID
 };
​
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
map.setTilt(0);
}
​
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
​
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
​

以上就是对Google 地图类型的资料简单整理和讲解,希望能帮助开发Google地图的朋友,后续继续补充相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
javascript下string.format函数补充
Aug 24 Javascript
js日期时间补零的小例子
Mar 05 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
JS实现小星星特效
Dec 24 Javascript
Google 地图控件集详解及实例代码
Aug 06 #Javascript
Google 地图事件实例讲解
Aug 06 #Javascript
Google 地图叠加层实例讲解
Aug 06 #Javascript
Google Maps基础及实例解析
Aug 06 #Javascript
浅谈js的html元素的父节点,子节点
Aug 06 #Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 #Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 #Javascript
You might like
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
python自动发送邮件脚本
2018/06/20 Python
python全栈知识点总结
2019/07/01 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
逻辑链路控制协议
2016/10/01 面试题
家长寄语大全
2014/04/02 职场文书
《分一分》教学反思
2014/04/13 职场文书
诚信承诺书模板
2014/05/26 职场文书
会计专业自荐书
2014/07/08 职场文书
2014年保密工作总结
2014/11/22 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Python内置的数据类型及使用方法
2022/04/13 Python