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

Posted 2020-07-20 Damon

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 调用谷歌地图API 输入地址点击弹出悬浮信息相关的知识，希望对你有一定的参考价值。

<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>

以上是关于javascript 调用谷歌地图API 输入地址点击弹出悬浮信息的主要内容，如果未能解决你的问题，请参考以下文章

谷歌地图 API - 按地址添加标记 javascript

减少谷歌地图成本计算，只能调用谷歌地图javascript api

是否可以使用地图 API 调用（例如，必应地图、谷歌地图）从街道地址获取商店网站地址？ [关闭]

微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

如何调用谷歌地图接口的api 在python中实现输入经纬度查询到城市

谷歌地图：自动建议地址问题

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

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