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实现自定义对话框的代码
Jun 15 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
详解webpack打包vue时提取css
May 26 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
用Node提供静态文件服务的方法
Jul 06 Javascript
node上的redis调用优化示例详解
Oct 30 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
yii中widget的用法
2014/12/03 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
python使用fork实现守护进程的方法
2017/11/16 Python
python正则实现计算器功能
2017/12/14 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python pygame实现球球大作战
2019/11/25 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
请介绍一下Ant
2016/07/22 面试题
和平主题的演讲稿
2014/01/12 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
mysql sock 文件解析及作用讲解
2022/07/15 MySQL