• Googlemap获取经纬度For APIV3


        废话少说,代码你懂得:

    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Google Maps API Sample</title>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            
    //初始化地图
            function initialize()
            {
                
    var latlng = new google.maps.LatLng(30.26120.19);
                
    var myOptions =
                {
                    zoom: 
    14,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                
    //不用Var声明,作为全局变量使用
                map = new google.maps.Map(document.getElementById("google_map"), myOptions);

                
    //监听鼠标移动、点击的动作,并调用事件函数
                google.maps.event.addListener(map, 'mousemove'function (event) { getCoordinate(event.latLng); });
                google.maps.event.addListener(map, 
    'click'function (event) { getPoint(event.latLng); });
            }

            
    //鼠标移动时获取的经纬度
            function getCoordinate(location)
            {
                document.getElementById(
    "point_x").value = location.Xa;
                document.getElementById(
    "point_y").value = location.Ya;
            }

            
    //鼠标点击获取指定点的经纬度
            function getPoint(point)
            {
                document.getElementById(
    "show_x").value = point.Xa;
                document.getElementById(
    "show_y").value = point.Ya;
            }

            
    //定位到指定坐标的位置,并将该点设为地图中心
            function getLocation()
            {
                
    var pointX = document.getElementById("show_x").value;
                
    var pointY = document.getElementById("show_y").value;
                
    var targLatLng = new google.maps.LatLng(pointX, pointY);
                map.setZoom(
    14);
                map.setCenter(targLatLng);
            }
        
    </script>
    </head>
    <body onload="initialize()">
        <div id="google_map" style=" 100%; height: 600px">
        </div>
        <input type="text" value="鼠标经过处经纬度:" />
        <input id="point_x" type="text" />
        <input id="point_y" type="text" />
        <input type="text" value="鼠标单击处经纬度:" />
        <input id="show_x" type="text" />
        <input id="show_y" type="text" />
        <input id="btnLocation" type="button" value="定位" onclick="getLocation()" />
    </body>
    </html>

     这是运行后的效果图:

  • 相关阅读:
    我的软考之路(五)——数据结构与算法(3)之图
    我的软考之路(四)——数据结构与算法(2)之树与二叉树
    程序员学习资料分享---爱分享的程序员(新浪微博)
    HIT CS科班对计算机专业knowledge的compilation
    我的软考之路(三)——数据结构与算法(1)之线性
    我的软考之路(二)——J2SE宏观总结
    python进阶七_文件操作(三)
    python进阶七_文件操作(二)
    python进阶七_文件操作(一)
    python进阶六_封装与继承
  • 原文地址:https://www.cnblogs.com/codewolf/p/2669323.html
Copyright © 2020-2023  润新知