zoukankan      html  css  js  c++  java
  • 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>

     这是运行后的效果图:

  • 相关阅读:
    【洛谷6620】[省选联考 2020 A 卷] 组合数问题(下降幂)
    【AtCoder】AtCoder Grand Contest 033 解题报告
    【AtCoder】AtCoder Grand Contest 034 解题报告
    【洛谷5445】[APIO2019] 路灯(树套树)
    【LOJ6059】「2017 山东一轮集训 Day1」Sum(倍增优化数位DP+NTT)
    【LOJ6159】「美团 CodeM 初赛 Round A」最长树链(树的直径)
    重新入门的Polya定理
    【洛谷6105】[Ynoi2010] y-fast trie(set)
    【BZOJ4480】 [JSOI2013] 快乐的jyy(回文自动机裸题)
    【LOJ6172】Samjia 和大树(树形DP+猜结论)
  • 原文地址:https://www.cnblogs.com/codewolf/p/2669323.html
Copyright © 2011-2022 走看看