【Google】google地图-根据经纬度来查找位置

效果图:

HTML代码:

<link rel="stylesheet" href="source/plugin/driving_ranges/template/css/driving_page.css" type="text/css" />

<script type="text/javascript" src="source/plugin/driving_ranges/template/js/jquery-1.7.2.min.js" ></script>

<script type="text/javascript" src="source/plugin/driving_ranges/template/js/driving_page.js" ></script>

<script type="text/javascript" src="source/plugin/driving_ranges/template/js/google.js" ></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  

<div id="Map">

<div id="map_canvas_jhonse" style="width: 910px; height: 600px;"></div> 

</div>

Javascript代码:

$(document).ready(function(){

    /* 
        latitude 纬度  
        longitude 精度  
        title 悬浮在标记图标上显示的内容 
        openInfo 提示窗口内容(InfoWindow) 
    */  
    function initialize(latitude,longitude,title,openInfo) {  

		var map;
        //地图定位  
        var myLatlng = new google.maps.LatLng(latitude,longitude);  
        var myOptions = {  
                zoom : 11,          //地图的缩放程度  
                center : myLatlng,  //地图中心位置  
                mapTypeId : google.maps.MapTypeId.ROADMAP  
            };  

        //把地图绑定在ID为map_canvas的DIV上  
        map = new google.maps.Map(document.getElementById("map_canvas_jhonse"),myOptions);  

        //显示地址的标记图标  
        var marker = new google.maps.Marker({  
            position: myLatlng,   
            map: map,   
            title:title  
          //  icon: 'http://google-maps-icons.googlecode.com/files/factory.png'   //自定义标记图标  
        });  

        var infowindow = new google.maps.InfoWindow({           //InfoWindow 内容提示  
            content: openInfo,  
            position: myLatlng  
        });   

        infowindow.open(map);   //显示提示主窗口  

        //给marker添加点击事件  
        google.maps.event.addListener(marker, 'click', function() {  
            infowindow.open(map); //如果提示窗口关闭了,点击标记图标可再次显示提示主窗口  
        });   
    } 

	initialize($("#wd").text(),$("#jd").text(),$("#Course").text(),$("#Con").html());

});

 

Author: jhonse

Jhonse技术博客: http://blog.jhonse.com

Leave a Reply

Your email address will not be published. Required fields are marked *