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居然支持中文(unicode)编程!
Apr 12 Javascript
JavaScript XML操作 封装类
Jul 01 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
javascript类型转换示例
Apr 29 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
7个jQuery最佳实践
Jan 12 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
js中switch语句的学习笔记
Mar 25 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/11/06 PHP
php实现的http请求封装示例
2016/11/08 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
青年文明号创建承诺
2014/03/31 职场文书
超市客服工作职责
2014/06/11 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
经典爱情感言
2015/08/03 职场文书