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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
采用call方式实现js继承
May 20 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
为你总结一些php信息函数
2015/10/21 PHP
jquery 学习笔记一
2010/04/07 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
学生打架检讨书
2014/02/14 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
2015年党总支工作总结
2015/05/25 职场文书
党员发展大会主持词
2015/07/03 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL