什么是 Google Maps?
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 的信息。