GoogleV3地图API学习

最新推荐文章于 2021-10-27 00:14:00 发布

weixin_30848775

最新推荐文章于 2021-10-27 00:14:00 发布

阅读量374

点赞数

原文链接：http://www.cnblogs.com/nightly/archive/2012/05/28/2521401.html

版权

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var geocoder;
    var map;
    var query = "泉州市城西路北五区4号楼";
    var display = "<b>单位：</b>诺奇服装泉州城西店";
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var myOptions = {
            zoom: 18,//缩放比例
            mapTypeId: google.maps.MapTypeId.ROADMAP //地图类型 •MapTypeId.ROADMAP •MapTypeId.SATELLITE •MapTypeId.HYBRID •MapTypeId.TERRAIN 
    
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        codeAddress();
    }

    function codeAddress() {
        var address = query;
        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 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("未能解析该地址的原因: " + status);
            }
        });
    }
</script>
</head>
<body οnlοad="initialize()">
<div id="map_canvas" style="width:400px; height:400px;"></div>


</body>
</html>

Google Maps JavaScript API V3 教程：

https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN

转载于:https://www.cnblogs.com/nightly/archive/2012/05/28/2521401.html

weixin_30848775

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GoogleV3地图API学习

<!DOCTYPE html><html><head><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">...
复制链接

扫一扫