上一节:

  HTML 谷歌地图

  • HTML谷歌地图

    此示例定义了以中国北京市为中心的Google地图：

    <!DOCTYPE html>
                                        <html>
                                        <body>

                                        <h1>我的第一个谷歌地图</h1>

                                        <div id="map" style="width:400px;height:400px;background:green"></div>

                                        <script>
                                          function myMap() {
                                            var mapOptions = {
                                                center: new google.maps.LatLng(39.9, 116.39),
                                                zoom: 10,
                                                mapTypeId: google.maps.MapTypeId.HYBRID
                                            }
                                            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
                                          }
                                        </script>

                                        <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
                                         
                                        </body>
                                        </html>
    尝试一下

    示例说明：

    所述的MapOptions变量定义为地图的配置属性。
    center属性指定要显示在地图中心（使用纬度和经度坐标）。
    zoom属性指定地图缩放级别（尝试用缩放级别进行试验）。
    mapTypeId属性指定地图类型来显示。支持以下地图类型：ROADMAP，SATELLITE，HYBRID和TERRAIN。
    这一行：var map = new google.maps.Map(document.getElementById("map"),mapOptions); 使用传递的参数(mapOptions)在id ="map"的<div>元素内创建一个新映射。
    这一行：<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>，引入谷歌地图API的JS文件。

    要学习更多的谷歌地图技术，请学习我们的Google Maps教程
上一节: