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>

     这是运行后的效果图:

  • 相关阅读:
    BZOJ4569: [Scoi2016]萌萌哒
    BZOJ4566: [Haoi2016]找相同字符
    BZOJ4556: [Tjoi2016&Heoi2016]字符串
    BZOJ4545: DQS的trie
    BZOJ4458: GTY的OJ
    Codeforces Beta Round #19E. Fairy
    不确定性推理
    朴素贝叶斯
    对抗搜索
    struct
  • 原文地址:https://www.cnblogs.com/codewolf/p/2669323.html
Copyright © 2011-2022 走看看