javascript 调用谷歌地图API 输入地址点击弹出悬浮信息

最新推荐文章于 2024-05-07 09:26:26 发布

原创最新推荐文章于 2024-05-07 09:26:26 发布 · 5.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #api #function #animation #textbox #query

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何利用JavaScript与谷歌地图API结合，实现用户输入地址后，点击触发地图上相应位置的悬浮信息显示。通过示例代码详细阐述了调用API和处理地图事件的过程。

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

上面是执行结果，下面是代码。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <script type="text/javascript"  
        src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>  
    <script type="text/javascript">  
        var geocoder;  
        var map;  
        //实际查询地址  
        //var query = "辽宁沈阳文化路三号巷11号";  
        //var query = "东北大学北门";  
        //显示名称  
        //var display = "<b>单位: </b>东北大学";  
        function initialize() {  
            geocoder = new google.maps.Geocoder();  
            var myOptions = {  
                zoom : 17,//缩放比例  
                //地图类型 •MapTypeId.ROADMAP •MapTypeId.SATELLITE   
                //•MapTypeId.HYBRID •MapTypeId.TERRAIN   
                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>