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. smarty模板引擎_6-Smarty的内置函数
  2. replication crash safe
  3. 转载——开阔自己的视野，勇敢的接触新知识
  4. 1.Ehcache（01）——简介、基本操作
  5. 在Openstack上创建并访问Kubernetes集群
  6. GDPR法律条款解读及应对指南（全面版）
  7. PostgreSQL10.1-CN-v0.1.chm中文手册
  8. 详解光纤光缆、网线、电缆的区别
  9. iFixit 拆解 2014 款 Mac mini拆机教程, 内存确认不能更换.
  10. ms office excel2013教程 - 套用表格样式
  11. Office 365 共享链接直接进入编辑
  12. SEO优化技巧：如何提升流量，提高网站点击率
  13. SLCP认证辅导，SLCPCAFv1.4和v1.3相比较共同之处在哪
  14. 使用Jsoup技术获取`阿里拍卖`中法院拍卖的所有拍卖品
  15. 小米AX6S刷OpenWrt和开启OpenClash，及刷回官网固件
  16. 终于倒下了！运营16年的雅虎问答，因“不受欢迎”将永久关闭
  17. Android 获取手机通讯录联系人列表(仅供学习)
  18. 如何写一个bat批处理自动上传文件到FTP 转载
  19. 树洞外链更新至2.2-支持本地/远程储存，新增用户系统
  20. java压缩文件详解_Java解压和压缩带密码的zip文件过程详解

热门文章

  1. 【bzoj4887】[Tjoi2017]可乐 矩阵乘法
  2. H5实现APP下载功能
  3. CCNA-NAT协议 静态NAT 动态NAT(多对多) PAT(多对一) 内网与外网之间的通信 GNS3实验验证
  4. matlab逐步回归结果分析,matlab中的逐步回归.doc
  5. android 自定义canvas,android随笔之自定义View的Canvas用法
  6. python实现网页微信登录_网站微信登录－python 实现
  7. 电商云仓储到底是什么？
  8. springboot高校学习资源共享系统java
  9. Microbiome：环境过滤驱动农田生态系统土壤古菌独特的空间分布
  10. 移动性管理：小区选择与重选