上一节:

  HTML 谷歌地图



kc

  • 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教程
上一节: