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 实现的全选和反选
Apr 15 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
JS获取动态添加元素的方法详解
Jul 31 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 基本语法格式
2009/12/15 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
浅谈python对象数据的读写权限
2016/09/12 Python
Django内容增加富文本功能的实例
2017/10/17 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python简单贪吃蛇开发
2019/01/28 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
技术总监个人的自我评价范文
2013/12/18 职场文书
微信营销策划方案
2014/02/24 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
4种方法python批量修改替换列表中元素
2022/04/07 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js