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 要点归纳(一) jQuery选择器
Mar 21 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
常用jQuery代码分享
Jul 14 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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 smarty模版引擎中的缓存应用
2009/12/02 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
PHP中echo和print的区别
2014/08/28 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python3 拼接字符串的7种方法
2018/09/12 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
PyTorch中permute的用法详解
2019/12/30 Python
vscode调试django项目的方法
2020/08/06 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
大学生实习感言
2014/01/16 职场文书
企业总经理职责
2014/02/02 职场文书
敬老院活动总结
2014/04/28 职场文书
体育之星事迹材料
2014/05/11 职场文书
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers