google地图的API学习

最新推荐文章于 2025-06-09 11:57:08 发布

shang8神

最新推荐文章于 2025-06-09 11:57:08 发布

阅读量613

点赞数

CC 4.0 BY-SA版权

分类专栏： goole地图API 文章标签： google地图 api

本文链接：https://blog.youkuaiyun.com/shang8shen/article/details/12852901

goole地图API 专栏收录该内容

1 篇文章

订阅专栏

本文详细探讨了Google Maps API的使用，包括如何集成到项目中，实现地理定位、路线规划和地图显示等功能，同时介绍了API的关键概念和技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    
    <script type="text/javascript">    
        var geocoder;    
        var map;    
 
        function initialize() {    
            geocoder = new google.maps.Geocoder();    
            var myOptions = {    
                zoom : 15,//缩放比例    
 
                mapTypeId : google.maps.MapTypeId.ROADMAP    
            }    
            map = new google.maps.Map(document.getElementById("map_canvas"),    
                    myOptions);    
            codeAddress();    
        }    
        function codeAddress() {    
            var address = document.getElementById("address").value;;    
            //地址解析    
            geocoder.geocode({    
                'address' : address    
            }, function(results, status) {    
                if (status == google.maps.GeocoderStatus.OK) {    
                    //依据解析的经度纬度设置坐标居中    
                    map.setCenter(results[0].geometry.location);    
                    var marker = new google.maps.Marker({    
                        map : map,    
                        position : results[0].geometry.location,    
                        title : address,    
                        //坐标动画效果    
                        animation : google.maps.Animation.DROP    
                    });    
                    var display = "地址: " + results[0].formatted_address;  
                    var infowindow = new google.maps.InfoWindow({    
                        content : "<span style='font-size:11px'><b>名称: </b>"    
                                + address + "<br>" + display + "</span>",    
                        //坐标偏移量，一般不用修改    
                        pixelOffset : 0,    
                        position : results[0].geometry.location    
        
                    });    
                    //默认打开信息窗口,点击做伴弹出信息窗口    
                    infowindow.open(map, marker);    
                    google.maps.event.addListener(marker, 'click', function() {    
                        infowindow.open(map, marker);    
                    });    
                } else {    
                    alert("Geocode was not successful for the following reason: " + status);    
                }    
            });    
        }    
    </script>    
  
</head>  
  
  
<body>  
 <body onload="initialize()">  
        <div id="map_canvas" style="width: 320px; height: 480px;"></div>  
 <div>  
    <input id="address" type="textbox" value="荆州">  
    <input type="button" value="Encode" onclick="codeAddress()">  
  </div>  
    </body>  
</body>  
</html>