Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

什么是 Google Maps?


HTML

Google Maps 是一个 Google API

Google Fonts 是一个 Google API

Google Charts 是一个 Google API


学习如何在网页中添加 Google Maps。



我的第一个 Google 地图

从一个简单的网页开始。

添加一个 <div> 元素,您希望地图显示在其中,并设置地图的大小

示例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Google 地图</h1>

<div id="map" style="width:100%;height:400px;">我的地图将显示在这里</div>

</body>
<html>

添加一个 JavaScript 函数来显示地图

示例

function myMap() {
    var mapCanvas = document.getElementById("map");
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.2),
        zoom: 10
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
}

**mapCanvas** 变量是地图的 HTML 元素。

**mapOptions** 变量定义了地图的属性。

**center** 属性指定地图的中心位置(使用经纬度坐标)。

**zoom** 属性指定地图的缩放级别(尝试使用不同的缩放级别)。

使用 mapCanvas 和 mapOptions 作为参数创建 **google.maps.Map** 对象。



最后添加 Google API

地图的功能由位于 Google 的 JavaScript 库提供。

示例

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
自己尝试一下 »

Google Maps 教程

在我们的 Google Maps 教程 中了解更多关于 Google Maps 的信息。


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.