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 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
Angular中$compile源码分析
Jan 28 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
Vue父组件监听子组件生命周期
Sep 03 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
采用call方式实现js继承
2014/05/20 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
使用JS动态显示文本
2017/09/09 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
深入学习Python中的装饰器使用
2016/06/20 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
资产评估专业学生的自我鉴定
2013/11/14 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
2014升学宴答谢词
2014/01/26 职场文书
考试违纪检讨书
2014/02/02 职场文书
青年教师培训方案
2014/02/06 职场文书
服装促销活动方案
2014/02/23 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android