【Maps JavaScript API】基础地图的创建与实现详解

news2024/11/14 2:00:08

文章目录

    • 一、概述
      • 1. Google Maps JavaScript API 简介
      • 2. Simple Map 示例概述
    • 二、创建一个基础地图
      • 1. 引入 Google Maps JavaScript API
      • 2. 初始化地图
        • (1) 定义地图的 HTML 容器
        • (2) 编写 JavaScript 代码初始化地图
      • 3. 将地图集成到网页中
    • 三、代码分析与关键点
      • 1. 地图中心点的设置
      • 2. 地图缩放级别的设置
      • 3. 异步加载 Google Maps JavaScript API
    • 四、如何在本地运行示例
      • 1. 克隆示例代码
      • 2. 依赖安装与运行
      • 3. 其他示例的切换
    • 五、总结

Google Maps JavaScript API 是一个功能强大且灵活的地图服务接口，广泛应用于网页开发中。本文将详细介绍如何使用 Google Maps JavaScript API 创建一个简单的地图，并探讨其中的关键概念和实现细节，帮助开发者更好地理解和使用这一API。

一、概述

1. Google Maps JavaScript API 简介

Google Maps JavaScript API 是 Google 提供的一个基于 JavaScript 的地图服务接口，开发者可以利用它在网页中嵌入功能强大的交互式地图。无论是展示地理信息、实现导航功能，还是进行复杂的空间数据处理，Google Maps JavaScript API 都提供了丰富的工具和灵活的定制选项。

2. Simple Map 示例概述

在本教程中，我们将使用 Google Maps JavaScript API 创建一个基础的地图，并将其中心定位在澳大利亚的新南威尔士州的悉尼市。这个示例展示了如何通过简单的几行代码，快速在网页中生成一个地图并自定义其显示效果。

二、创建一个基础地图

1. 引入 Google Maps JavaScript API

在创建地图之前，首先需要在网页中引入 Google Maps JavaScript API。为了实现这一点，开发者需要在 HTML 文件中添加一段 script 标签，指定 API 的加载 URL 以及需要使用的库。

<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({key: "YOUR_API_KEY", v: "weekly"});</script>

在上面的代码中，需要将 YOUR_API_KEY 替换为你自己的 Google Maps API 密钥。这个密钥是使用 API 的必要凭证，获取密钥的过程可以在 Google Cloud Platform 控制台中完成。

2. 初始化地图

在引入了 Google Maps JavaScript API 之后，接下来需要通过 JavaScript 初始化地图并将其展示在网页中。

(1) 定义地图的 HTML 容器

首先，需要在 HTML 中定义一个容器来承载地图。一般情况下，这个容器是一个 <div> 元素，并通过 CSS 设置其高度和宽度。

<div id="map"></div>

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

在这里，我们将地图的高度设置为 100%，使其填满整个页面。开发者也可以根据实际需求调整容器的尺寸和样式。

(2) 编写 JavaScript 代码初始化地图

接下来，通过 JavaScript 代码来初始化地图并设置其中心点及缩放级别。以下是一个完整的示例代码：

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();

在这个示例中，initMap 函数用于初始化地图并将其加载到网页中。该函数通过 google.maps.importLibrary("maps") 异步加载 Maps 库，并在成功加载后创建一个新的 Map 对象。

Map 对象的构造函数接受两个参数：第一个参数是用于承载地图的 HTML 元素，第二个参数是包含地图选项的配置对象。在这个配置对象中，center 属性用于指定地图的中心点坐标（这里是悉尼的经纬度），zoom 属性则用于设置地图的缩放级别。

3. 将地图集成到网页中

在完成了上述步骤之后，地图就会被成功加载到网页中。以下是一个完整的 HTML 文件示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({key: "YOUR_API_KEY", v: "weekly"});</script>
  </body>
</html>

在这个 HTML 文件中，我们引入了 CSS 文件来设置地图的样式，并通过 JavaScript 文件来初始化地图并将其加载到页面中。

三、代码分析与关键点

1. 地图中心点的设置

center 属性用于定义地图的中心点，它接受一个包含纬度（lat）和经度（lng）的对象。在本示例中，我们将地图的中心点设置为澳大利亚悉尼的地理坐标（纬度 -34.397， 经度 150.644）。开发者可以根据需求将 center 属性的值替换为其他地点的坐标。

2. 地图缩放级别的设置

zoom 属性用于控制地图的缩放级别，值的范围通常在 0 到 21 之间。较大的值表示更高的缩放级别，地图显示的范围也就越小；反之，较小的值表示较低的缩放级别，地图显示的范围更广。在这个示例中，缩放级别被设置为 8，适用于显示城市级别的地图。

3. 异步加载 Google Maps JavaScript API

在实际应用中，由于网络延迟等原因，API 的加载可能需要一定时间。为此，代码中使用了异步函数 initMap 来确保在 API 加载完成后再进行地图初始化操作。这种方式可以避免因 API 加载未完成而导致的错误。

四、如何在本地运行示例

1. 克隆示例代码

Google 提供了一个包含各种示例代码的 GitHub 仓库，开发者可以通过克隆这个仓库来获取示例代码并在本地运行。以下是克隆和运行示例代码的步骤：

git clone -b sample-map-simple https://github.com/googlemaps/js-samples.git
cd js-samples
npm i
npm start

2. 依赖安装与运行

克隆仓库后，进入项目目录并使用 npm 安装依赖包，然后通过 npm start 启动示例应用。在本地服务器上启动后，开发者可以通过浏览器访问运行的地图示例。

3. 其他示例的切换

除了 sample-map-simple 分支外，Google Maps JavaScript API 的 GitHub 仓库中还包含其他示例代码。开发者可以通过切换到其他分支来尝试不同的示例，并进一步学习和探索 Google Maps API 的更多功能。

git checkout sample-SAMPLE_NAME
npm i
npm start

五、总结

通过本文的介绍，开发者可以快速了解如何使用 Google Maps JavaScript API 创建一个简单的地图，并掌握其中的关键实现步骤。在实际开发中，Google Maps API 提供了更丰富的功能和定制选项，开发者可以根据需求进一步扩展和优化地图应用，为用户提供更加完善的地图服务体验。

推荐：

  • JavaScript
  • react
  • vue

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2071554.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

32 增加系统调用（1）

32 增加系统调用（1）

系统调用在 数据手册中的描述 这是在 GDT 中的描述符 这个系统调用 segment selector 指向的时 内核的代码段。因为系统调用需要的权限比较高。 offset 指的时 在内核代码中的具体的函数的地址。
阅读更多...
SQL Server 查询语句中，对索引列做CONVERT的影响

SQL Server 查询语句中，对索引列做CONVERT的影响

通常&#xff0c;在做SQL Server查询语句优化的时候&#xff0c;如果发现语句对索引列做了函数计算&#xff0c;都会建议改写&#xff0c;将计算的逻辑转移到筛选条件列上。但这种对索引列的计算&#xff0c;有时却会带来一些额外的好处。请看以下的例子&#xff1a; --测试数…
阅读更多...
【Linux开发板pip安装库时报错解决】Error 28:No space left on device报错需要更换库的安装路径

【Linux开发板pip安装库时报错解决】Error 28:No space left on device报错需要更换库的安装路径

之前在Linux开发板上尝试运行pytorch框架&#xff0c;但是需要安装torch和torchvision的库&#xff0c;很奇怪的是我按照之前pip3 install torch -i http://pypi.douban.com/simple --trusted-host pypi.douban.com的安装方式却出现了以下的报错&#xff1a; 系统报错提示说No …
阅读更多...
R 语言学习教程，从入门到精通，R 绘图饼图（23）

R 语言学习教程，从入门到精通，R 绘图饼图（23）

1、R 绘图 条形图 条形图&#xff0c;也称为柱状图条形图&#xff0c;是一种以长方形的长度为变量的统计图表。 条形图可以是水平或垂直的&#xff0c;每个长方形可以有不同的颜色。 R 语言使用 barplot() 函数来创建条形图&#xff0c;格式如下&#xff1a; barplot(H,xlab,…
阅读更多...
FastAPI+React18开发通用后台管理系统用户功能实战

FastAPI+React18开发通用后台管理系统用户功能实战

最近开发了一个React18的后台管理系统&#xff0c;登录界面如下&#xff1a; 如果登录成功了则提示并跳转到首页&#xff1a; 点击注销按钮则提示退出系统成功&#xff1a; 没有登录就访问首页则提示请先登录。 这些功能是怎么实现的呢&#xff1f; 先看看登录功能使用…
阅读更多...
JNA实践之Java模拟C结构体、结构体指针、结构体数组

JNA实践之Java模拟C结构体、结构体指针、结构体数组

目录 1 JNA模拟C结构体1.1 结构体本身作参数1.2 结构体指针作参数1.3 结构体内部嵌套结构体(结构体本身作参数)1.4 结构体指针作参数 2 结构体中嵌套结构体数组2.1 用作输入2.2 用作输出 3 结构体数组作参数典型错误1--内存不连续典型错误2--误用ByValue 4 Java映射C中char[]类…
阅读更多...
scrapy--json结构数据-存储

scrapy--json结构数据-存储

免责声明:本文仅做演示与分享... 目录 基于命令存储的解析方法: settings.py blibli.py 基于管道存储的解析方法: 1-在爬虫文件中进行数据解析 2-在items.py定义相关属性 3-在 爬虫文件中 把 解析的数据存储封装到item类型对象中 4-把item类型对象提交给管道 5-在管道文件中…
阅读更多...
软件设计之MySQL(6)

软件设计之MySQL(6)

软件设计之MySQL(6) 此篇应在JavaSE之后进行学习: 路线图推荐&#xff1a; 【Java学习路线-极速版】【Java架构师技术图谱】 Navicat可以在软件管家下载 使用navicat连接mysql数据库创建数据库、表、转储sql文件&#xff0c;导入sql数据 MySQL数据库入门到大牛&#xff0c;my…
阅读更多...
【吊打面试官系列-Memcached面试题】memcached 能接受的 key 的最大长度是多少？

【吊打面试官系列-Memcached面试题】memcached 能接受的 key 的最大长度是多少？

大家好&#xff0c;我是锋哥。今天分享关于 【memcached 能接受的 key 的最大长度是多少&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; memcached 能接受的 key 的最大长度是多少&#xff1f; key 的最大长度是 250 个字符。需要注意的是&#xff0c;250 是 m…
阅读更多...
KEIL中分散加载文件基础知识

KEIL中分散加载文件基础知识

一、分散加载文件基本概念 1、分散加载文件&#xff1a;&#xff08;即scatter file 后缀为.scf&#xff09;是一个文本文件&#xff0c;通过编写一个分散加载文件来指定ARM连接器在生成映像文件时如何分配RO,RW,ZI等数据的存放地址。如果不用分散加载文件指定&#xff0c;那么…
阅读更多...
区域形态学demo发布

区域形态学demo发布

demo实现了halcon中threshold、connection、fill_up、union、difference、intersection、dilation、erosion、opening、closing等算子功能&#xff0c;区域使用行程编码表示。目前可选择的结构元有圆形、矩形、十字&#xff08;实际接口没有限制&#xff09;&#xff0c;所有结…
阅读更多...
Flutter--＞Widget上屏之路

Flutter--＞Widget上屏之路

本文主要介绍Flutter中创建一个Widget到屏幕上渲染出Widget内容的路程. 拾用本文您将获得: Widget是什么Element是什么RenderObject是什么 附加Buff: Widget直接渲染成图片文本String的绘制图片ui.Image的绘制 这一切都要从runApp方法开始说起, 如果你还不知道runApp是什么…
阅读更多...
【非常简单】 猿人学web第一届 第12题 入门级js

【非常简单】 猿人学web第一届 第12题 入门级js

这一题非常简单&#xff0c;只需要找到数据接口&#xff0c;请求参数 m生成的逻辑即可 查看数据接口 https://match.yuanrenxue.cn/api/match/12 查看请求对应的堆栈中的 requests 栈 list 为对应的请求参数 list 是由 btoa 函数传入 ‘yuanrenxue’ 对应的页码生成的 bto…
阅读更多...
安装torchvision==0.5.0

安装torchvision==0.5.0

安装pytorch 1.4 但是在当前配置的镜像源中找不到 torchvision0.5.0 这个版本的包。 直接找资源下载 网址添加链接描述 直接运行该命令&#xff0c;成功。 然后重复运行上面的命令就可以了 # CUDA 9.2 conda install pytorch1.4.0 torchvision0.5.0 cudatoolkit9.2 -c pyto…
阅读更多...
Spring Boot（快速上手）

Spring Boot（快速上手）

Spring Boot 零、环境配置 1. 创建项目 2. 热部署 添加依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional> </dependency&…
阅读更多...
Linux下进程间的通信--消息队列

Linux下进程间的通信--消息队列

System V IPC的概念 System V IPC&#xff08;System V Interprocess Communication&#xff09;是Unix和类Unix操作系统中一套传统的进程间通信机制&#xff0c;它包括三种主要的通信方式&#xff1a;消息队列、信号量和共享内存。这些机制提供了一种在不同进程之间交换数据和…
阅读更多...
llamaindex+Internlm2 RAG实践 #书生谱语大模型实战营#

llamaindex+Internlm2 RAG实践 #书生谱语大模型实战营#

1.打卡任务&#xff1a; 本次的打卡任务是llamaindexInternlm2 RAG实践&#xff0c;我们需要基于 LlamaIndex 构建自己的 RAG 知识库&#xff0c;寻找一个问题 A 在使用 LlamaIndex 之前InternLM2-Chat-1.8B模型不会回答&#xff0c;借助 LlamaIndex 后 InternLM2-Chat-1.8B 模…
阅读更多...
Axure设计之下拉单选框教程（中继器）

Axure设计之下拉单选框教程（中继器）

在Axure RP中&#xff0c;使用中继器&#xff08;Repeater&#xff09;可以实现许多复杂而动态的用户界面组件&#xff0c;比如下拉单选框。本文将详细介绍如何通过中继器创建一个美观且功能丰富的下拉单选框。 一、案例预览 预览地址&#xff1a;https://1zvcwx.axshare.com …
阅读更多...
如何使用ssm实现基于JAVA的网上药品售卖系统

如何使用ssm实现基于JAVA的网上药品售卖系统

TOC ssm133基于JAVA的网上药品售卖系统jsp 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规…
阅读更多...
什么是堡垒机

什么是堡垒机

堡垒机&#xff0c;即在一个特定的网络环境下&#xff0c;为了保障网络和数据不受来自外部和内部用户的入侵和破坏&#xff0c;而运用各种技术手段监控和记录运维人员对网络内的服务器、网络设备、安全设备、数据库等设备的操作行为&#xff0c;以便集中报警、及时处理及审计定…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023