zoukankan      html  css  js  c++  java
  • 点击百度地图获取位置详细信息(点击获取当前点击位置信息)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>点击地图获取地址和经纬度map,address,lng,lat</title>
    <meta name="robots" content="noindex, nofollow">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 将百度地图API引入,设置好自己的key -->
    <style type="text/css">

    </style>

    <!--填写自己的百度地图key-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填写key的位置"></script>
    </head>
    <body>

    <div class="main-div">
    <form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()">
    <table cellspacing="1" cellpadding="3" width="100%">
    <tr>
    <td>经度<input type="text" name="lng" id="lng" value=""/>
    </td>
    </tr>
    <tr>
    <td>纬度<input type="text" name="lat" id="lat" value=""/>
    </td>
    </tr>
    <tr>
    <td>
    地址<textarea name="" rows="1" cols="40" name='sever_add' id='sever_add' readonly placeholder="点击地图获取位置信息"></textarea>
    </td>
    </tr>
    </table>
    </form>
    <div id='allmap' style=' 50%; height: 50%; position: absolute;'></div>
    </div>
    <script type="text/javascript">

    //判断是否是空
    function isNull(a) {
    return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;
    }


    var map = new BMap.Map("allmap");
    var geoc = new BMap.Geocoder(); //地址解析对象
    var markersArray = [];
    var geolocation = new BMap.Geolocation();


    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12); // 中心点
    geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    var mk = new BMap.Marker(r.point);
    map.addOverlay(mk);
    map.panTo(r.point);
    map.enableScrollWheelZoom(true);
    }
    else {
    alert('failed' + this.getStatus());
    }
    }, {enableHighAccuracy: true})
    map.addEventListener("click", showInfo);


    //清除标识
    function clearOverlays() {
    if (markersArray) {
    for (i in markersArray) {
    map.removeOverlay(markersArray[i])
    }
    }
    }
    //地图上标注
    function addMarker(point) {
    var marker = new BMap.Marker(point);
    markersArray.push(marker);
    clearOverlays();
    map.addOverlay(marker);
    }
    //点击地图时间处理
    function showInfo(e) {
    document.getElementById('lng').value = e.point.lng;
    document.getElementById('lat').value = e.point.lat;
    geoc.getLocation(e.point, function (rs) {
    var addComp = rs.addressComponents;
    var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
    document.getElementById('sever_add').value = address;
    // if (confirm("您选择的地址是" + address + "?")) {
    //
    // }
    });
    addMarker(e.point);
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    史上最简单易懂的Android Pad手机屏幕适配方案
    Android平板开发
    Android TV 开发 (1)
    三大开源java区块链库
    将博客园数据导出到wordpress
    MQTT结构分析
    netty+mqtt
    安卓原生 VideoView实现rtsp流媒体的播放
    【矩阵专题】——矩阵加速
    征战蓝桥 —— 2016年第七届 —— C/C++A组第4题——快速排序
  • 原文地址:https://www.cnblogs.com/chenhuichao/p/8087265.html
Copyright © 2011-2022 走看看