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 Web Slider 焦点图示例源码
Oct 10 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
如何在selenium中使用js实现定位
Aug 18 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
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python发腾讯微博代码分享
2014/01/10 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python实现图片转字符画的示例
2017/08/22 Python
python logging模块的使用总结
2019/07/09 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python pip 常用命令汇总
2020/10/19 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
水毁工程实施方案
2014/04/01 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
消防隐患整改通知书
2015/04/22 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript
mysql查看表结构的三种方法总结
2022/07/07 MySQL