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>

     这是运行后的效果图:

  • 相关阅读:
    python datetime,字符串,时间戳相互转换
    python在linux环境读取access数据库mdb文件
    ruby 随机字符串rand方法避坑
    gin 页面重定向
    go语言 goquery爬虫
    Rails项目防止时序攻击
    Authorization With Pundit
    Rails/ActiveRecord order by Array
    java线程池
    Java安全API
  • 原文地址:https://www.cnblogs.com/codewolf/p/2669323.html
Copyright © 2011-2022 走看看