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 相关文章推荐
javascript Window及document对象详细整理
Jan 12 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
详解小程序云开发数据库
May 20 Javascript
Moment.js实现多个同时倒计时
Aug 26 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 安全检测代码片段(分享)
2013/07/05 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
详解Python中的Descriptor描述符类
2016/06/14 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
"序列点" 是什么
2016/07/29 面试题
女方回门宴答谢词
2014/01/14 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
美国留学经济担保书
2014/05/20 职场文书
婚庆公司计划书
2014/09/15 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
对学校的意见和建议
2015/06/04 职场文书
环保建议书作文400字
2015/09/14 职场文书