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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 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
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jquery 学习笔记一
2010/04/07 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
使用python实现链表操作
2018/01/26 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
Python gevent协程切换实现详解
2020/09/14 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
管理工程专业求职信
2014/08/10 职场文书
安全生产年活动总结
2014/08/29 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
教师节感谢信
2015/01/22 职场文书
休假证明书
2015/06/24 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript