Google Maps API支持四种地图类型：

  1. ROADMAP –显示普通的街道/道路地图（默认地图类型）。
  2. 地形-根据地形信息显示正常的街道/道路地图。
  3. 卫星–仅显示卫星图像。
  4. 混合–普通和卫星视图混合显示，在卫星图像上方显示街道/道路视图。

注意
通常，您只使用“ ROADMAP ”或“ HYBRID ”，而“ TERRAIN ”和“ SATELLITE ”的用例不多。

1.地图类型

有关所有可用的地图类型，请参考此MapTypeId API参考 。

您可以在创建Google地图时更改地图类型，如下所示：

var latlng = new google.maps.LatLng(37.4220279, -122.0840677);var myOptions = {zoom: 13,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP   //change here};var map = new google.maps.Map(document.getElementById("map_container"),myOptions);

或者像这样动态地更改它：

var map = new google.maps.Map(document.getElementById("map_container"),myOptions);map.setMapTypeId(google.maps.MapTypeId.HYBRID);

2.地图类型控制选项

此外，您可以更改“地图类型控制器”的位置和样式。 地图类型控制器是地图上的一个小方框或下拉菜单显示，因此用户可以动态更改地图类型。

见图：

支持3种地图类型控件：

  1. 默认-默认情况下，显示选项根据窗口大小和其他因素而变化。
  2. DROPDOWN_MENU –在下拉菜单中显示选项。
  3. HORIZONTAL_BAR –将选项显示为按钮，并水平对齐。

像这样配置控件样式：

var latlng = new google.maps.LatLng(37.4220279, -122.0840677);var myOptions = {zoom: 13,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}};

此外，您可以自定义显示地图类型控制器的位置，并在此Google Map控件位置参考中引用所有可用位置。

var latlng = new google.maps.LatLng(37.4220279, -122.0840677);var myOptions = {zoom: 13,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,position: google.maps.ControlPosition.BOTTOM_RIGHT}};

在以上代码段中，控件将显示在右下角，

3.地图类型示例

在Google地图上显示Google办公室（1600 Amphitheatre Parkway Mountain View，CA 94043）位置的完整示例：

  1. 地图类型=混合
  2. 地图类型控制= DROPDOWN_MENU
  3. 地图类型控制位置= TOP_CENTER
  4. 添加标记以标识地图上的位置。
<html>
<head>
<title>Google Maps API - Map Type</title>
<style type="text/css">
div#map_container{width:100%;height:350px;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript">function loadMap() {var latlng = new google.maps.LatLng(37.4220279, -122.0840677);var myOptions = {zoom: 13,center: latlng,mapTypeId: google.maps.MapTypeId.HYBRID,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,position: google.maps.ControlPosition.TOP_CENTER}};var map = new google.maps.Map(document.getElementById("map_container"),myOptions);var marker = new google.maps.Marker({position: latlng, map: map, title:"Google Office!"}); }
</script>
</head><body onload="loadMap()">
<div id="map_container"></div>
</body></html>

结果

下载此示例。

参考文献

  1. Google Map Types说明
  2. Google Maps JavaScript v3 API参考
标签： 谷歌地图 地图类型

翻译自: https://mkyong.com/google-maps/google-maps-api-map-types-example/

http://www.taodudu.cc/news/show-3099308.html

相关文章：

  • ModuleNotFoundError:No module named ‘googlemaps‘
  • 使用Google Maps API和google-maps-react进行React Apps
  • maps google android版,google maps中文安卓版
  • 【在Angular项目中使用googlemaps】
  • Android Google Maps教程
  • Android版Google Maps入门：高级
  • Google Maps基础及实例解析
  • Google Maps 基础
  • 2021年4月26日 星期一 三月十五 阴
  • 代码中转站
  • 正则表达式初体验
  • 【ECharts系列|03可视化大屏】大数据管理平台实时展示
  • 基于Echarts实现可视化数据大屏实时监测大数据
  • 从“账房先生”到“中国巨型计算机之父”，慈云桂先后主导了中国四代计算机的研发...
  • [数据处理与分析] Pandas 中的 DataFrame对象
  • py语法07-字符串的操作
  • 干货！用神经网络来表达隐式场景流
  • MYSQL的CRUD
  • 基于双重ABC分类的B2C电商的物流储位优化
  • HTML5期末大作业：个人主页网站设计(6页)代码质量高 学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
  • 【例9-3】结构体变量的引用
  • jieba分词TFIDF算法2
  • 【转】【技术博客】Spark性能优化指南——高级篇
  • 网页设计期末结课作业 2022最后的作业 用Dw div+css 做网页设计
  • java：静态方法，静态变量，实例方法，实例变量的关系 ----李雪
  • google 浏览器打印不出颜色问题
  • CSS 解决火狐浏览器打印时，背景颜色丢失的问题
  • 解决使用打印机打印网页时字体颜色变淡的问题
  • JavaScript 控制台输出彩色字
  • Google打印没有彩色，浏览器打印预览没有背景颜色和没有颜色

Google Maps API –地图类型示例相关推荐

  1. Google Maps API实例-地图搜索

    本文实现google maps API主要的函数库 html: <%@ Page Language="C#" AutoEventWireup="true" ...

  2. 基于Google Maps API的地图应用开发

      关于Google地图 API Google地图提供了两大API类库:Google Earth API 和Google Maps API,通过这些API 可以二次开发出功能强大的地图应用程序.其中G ...

  3. Google 地图 google map api / 地图有关

    第一种效果:可搜索,可以计算 参考: http://www.ditu123.com/main/google_map_api.html#The_Hello_World_of_Google_Maps 代码 ...

  4. Google Maps API V3 之 图层

    图层概述 图层是地图上的对象,包含一个或多个单独项,但可作为一个整体进行操作.图层通常反映了您添加到地图上用于指定公共关联的对象集合.Maps API 会通过以下方法管理图层内对象的显示形式:将图层的 ...

  5. Google maps API开发

    Google maps API开发 注:经纬度的查询,找了半天,终于找着活神仙了,(*^__^*) 嘻嘻-- 1.经纬度查询工具:http://www.playgoogle.com/googlemap ...

  6. ASP.NET调用V3版本的Google Maps API

    英文原文:Google Maps API V3 for ASP.NET 译文出处:青藤园 译文作者:王国峰 译文链接:ASP.NET中使用Google Maps API V3[译] 简介 Google ...

  7. Google Maps API V3 之绘图库

    绘图库 本文档中的概念仅适用于 google.maps.drawing 库中提供的地图项.默认情况下,系统在加载 Maps JavaScript API 时不会加载该库,您必须使用 libraries ...

  8. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  9. Google Maps API编程资源大全

    Google Maps API是Google自己推出编程API,可以让全世界对Google Maps有兴趣的程序设计师自行开发基于Google Maps的服务,建立自己的地图网站.以下是我在Googl ...

最新文章

  1. 批量条形码生成器_条码打印软件之Code32条形码
  2. 微信小程序 input框进行双向绑定
  3. 基于TableStore的数据采集分析系统介绍 1
  4. 组合数学 —— 组合数取模
  5. 计算几何 —— 二维几何基础 —— 三角形的面积
  6. 深入理解mysql中case when流程控制语句
  7. “AI+医疗”时代来临，我们还需要医生吗？
  8. 华为100万部鸿蒙,2019年Q4发布 华为100万部鸿蒙OS手机已开测
  9. js 匿名函数_JS箭头函数三连问：为何用、怎么用、何时用
  10. 《调色师手册：电影和视频调色专业技法（第2版）》——监视器校准
  11. 如何反编译dll文件
  12. 计算机通信技术【计算机网络】学习
  13. python基本函数的导数公式_算法中的微积分：5大函数求导公式让你在面试中脱颖而出...
  14. 关于网络、交换机、路由器
  15. 安卓系统启动脚本init.rc说明文件readme.txt翻译
  16. Linux基础命令----tail 查看文件尾部内容
  17. java取当前周期、月初至月末、季度初至季度末日期
  18. HTML5的离线储存怎么使用，它的工作原理是什么?
  19. SICNUOJ——meng新计划要求规范
  20. 美国，华尔街，某大银行。

热门文章

  1. 如何删除php空间,wps云文档空间满了怎么清除
  2. python var是什么意思_python3函数里var是什么意思？
  3. 用vant框架做H5时踩过的坑（下拉刷新、上拉加载等）
  4. 惰性学习算法 ---- k 近邻算法
  5. 微信、QQ等第三方账号登录的具体思路
  6. APP新用户注册、手机号绑定、用户登录验证新方式——一键登录（免密登录）验证方式新趋势
  7. SSM框架整合时applicationContext.xml文件的配置及详细解析
  8. 一键实现图像、视频卡通化，GAN又进化了
  9. 【WordPress】修改固定链接，文章链接
  10. dx.bat转换jar 包(java 1.8)出现 unsupported class file version 52.0 …while parsing