zoukankan      html  css  js  c++  java
  • 控经纬度显示地图与卫星

       <link href="css/jquery.ui.base.css" rel="stylesheet" type="text/css" />
        <link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
        <script src="js/jquery.mousewheel.js" type="text/javascript"></script>
        <script src="js/jquery.ui.core.js" type="text/javascript"></script>
        <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
        <script src="js/jquery.ui.button.js" type="text/javascript"></script>
        <script src="js/jquery.ui.spinner.js" type="text/javascript"></script>
        <link href="css/demos.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            function latlong() {
                return new google.maps.LatLng($("#lat").val(), $("#lng").val());
            }
            function position() {
                map.setCenter(latlong());
            }
            $("#lat, #lng").spinner({
                step: .001,
                change: position,
                stop: position
            });


            var map = new google.maps.Map($("#map")[0], {
                zoom: 8,
                center: latlong(),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
        });
    </script>
    <style type="text/css">
    #map {
    500px;
    height:500px;
    }
    </style>
    </head>
    <body>


    <label for="lat">纬度</label>
    <input id="lat" name="lat" value="44.797"/>
    <br>
    <label for="lng">经度</label>
    <input id="lng" name="lng" value="-93.278"/>


    <div id="map"></div>


    <div class="demo-description">
    </div>

  • 相关阅读:
    PostgreSQL远端访问
    PostgreSQL在线安装
    /usr/lib64改名字风波
    Provisional headers are shown(一)
    解析URL中的携带的参数到Map
    Mysql5.7的初始密码更改
    REST开放接口生成文档工具之apidoc
    自己来实现一套IOC注解框架
    RecyclerView打造通用的万能Adapter
    RecyclerView分隔线定制
  • 原文地址:https://www.cnblogs.com/qiqiBoKe/p/3088010.html
Copyright © 2011-2022 走看看