zoukankan      html  css  js  c++  java
  • jQuery根据纬度经度查看地图

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <title></title>    

     //在这里要注意js的引入顺序

        <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>
    </body>

    </html>


  • 相关阅读:
    让vs2013自带的IISExpress支持apk文件下载
    使用h5开发跨平台APP确保数据安全交互---服务器篇
    如何使用iis发布多个ftp,为何ftp 503错误?
    HttpApplication执行顺序
    EXCEL2010分成多个窗口的,解决单个窗口显示多个文档的弊病
    搜索引擎优化(SEO)解决方案
    .net网站快速停机设置app_offline
    SQL SERVER 连接 SQL SERVER 连接服务器
    SQL SERVER 备份还原 局域网 远程
    postgres 临时表
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3065846.html
Copyright © 2011-2022 走看看