Skip to content

Latest commit

 

History

History
96 lines (72 loc) · 2.36 KB

2.0README.md

File metadata and controls

96 lines (72 loc) · 2.36 KB

Google Maps

@(笔记)[Google Maps]@案例：https://github.com/lhywell/map/tree/master/example/example19

入门教程

官网

https://developers.google.com/maps/?hl=zh-cn

获取密钥

所有 Google Maps JavaScript API 应用均需要身份验证，点击获取密钥

地图类型

Maps JavaScript API 中提供了下列地图类型：

  • roadmap：用于显示默认的道路地图视图。这是默认地图类型。
  • satellite：用于显示 Google 地球卫星图片
  • hybrid：用于同时显示正常视图和卫星视图
  • terrain：用于基于地面信息显示物理地图。

样式化地图

可以利用样式化地图自定义 Google 基础地图的呈现方式，从而更改道路、公园和建成区等元素的视觉显示。

移动设备

可以快速加载到并流畅运行于移动设备

服务

  • Directions(路线服务)
  • Distance Matrix(距离服务)
  • Elevation(海拔服务)
  • 地理编码
  • Maximum Zoom Imagery(地图缩放服务)
  • 街景

查看API

示例

https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=zh-cn

构建一个地图

<!DOCTYPE html>
<html>

<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

    #map {
        height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
    var map;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 39.915, lng: 116.404 },
            zoom: 12
        });
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJgDmSHRPAE-USCCzW3Lnj5G1Fj2hjeqM&callback=initMap" async defer></script>
</body>

</html>

下一页：Bing