zoukankan      html  css  js  c++  java
  • 根据输入地址获得经纬度

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

    <head>
    <title>根据地址查询经纬度</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    </head>
    <style>
    body{
    background:#CBE1FF;margin:0;padding:0;
    }
    .con{
    height: 70px;
    480px;
    }
    .btn{
    height: 70px;
    100px
    }
    *{
    font-size: 30px
    }
    #container{
    position: absolute;margin-top:220px; 100%;height: 84%;top: 50;left:0;border: 1px solid gray;overflow:hidden;
    }
    #ok{
    display: inline-block;
    background: #F1F1F1;
    text-align: center;
    line-height:70px;
    border: 1px solid #A9A9A9;
    text-decoration: none;
    color: black;
    }
    #find{
    margin-left:8px;

    }
    </style>

    <body>
    <br>
    <div>&emsp; &emsp;
    要查询的地址:
    <input id="text_" class="con" placeholder="请输入地址" type="text" value=""/>&emsp;
    <input type="button" class="btn" id="find" value="查询" onclick="searchByStationName();" /> &emsp;
    <br>
    <br>
    &emsp;查询结果(经纬度):
    <input id="result_" class="con" type="text" /> &emsp;
    <a href="http://192.168.200.127:8088/WeChat/views/wechato.html?code=011sZSUH0zqjkh2C9KTH0DrgVH0sZSUp" class="btn" id="ok">确定</a> &emsp;

    <div id="container">
    </div>
    </div>
    </body>




    <script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom("深圳", 15);
    map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
    map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用

    map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    map.addControl(new BMap.OverviewMapControl({
    isOpen: true,
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT
    })); //右下角,打开

    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调节窗体大小
    function searchByStationName() {
    map.clearOverlays(); //清空原来的标注
    var keyword = document.getElementById("text_").value;
    localSearch.setSearchCompleteCallback(function(searchResult) {
    var poi = searchResult.getPoi(0);
    document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
    map.centerAndZoom(poi.point, 13);
    var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注,为要查询的地方对应的经纬度
    map.addOverlay(marker);
    var content = document.getElementById("text_").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;

    var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
    marker.addEventListener("click", function() {
    this.openInfoWindow(infoWindow);
    });
    // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    });
    localSearch.search(keyword);
    }

    $("#ok").onclick = function(){
    window.location.href = "";
    }


    </script>
    </html>

  • 相关阅读:
    Jmeter ----关于上传图片接口
    JMeter学习笔记16-如何输出HTML格式的性能测试报告
    Robot Framework课件汇总
    Robot Framework自动化测试(七)--- jybot模式
    Robot Framework自动化测试(六)--- robotremoteserver使用
    Robot Framework自动化测试(四)--- 分层思想
    Robot Framework自动化测试(五)--- 开发系统关键字
    Robot Framework自动化测试(二)---元素定位
    威睿虚拟机 VMware Workstation Pro 15.1.0 中文版 + 注册机
    我眼中的java线程池实现原理
  • 原文地址:https://www.cnblogs.com/web-aqin/p/aqin.html
Copyright © 2011-2022 走看看