博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
百度地图获坐标拾取
阅读量:4948 次
发布时间:2019-06-11

本文共 926 字,大约阅读时间需要 3 分钟。

1 jsp页面

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">
        .allmap {width: 240px;height: 180px;overflow: hidden;margin:0;}
        #allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
        #golist {display: none;}
        @media (max-device-width: 780px){#golist{display: block !important;}}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

  <body>

  <div id="allMap"> </div>

       <input type="text" id="longitude" name="longitude">
       <input type="text" id="latitude" name="latitude"/>

  </body>

 

2 js 页面

  $(function(){

      getMap();
    });

  function getMap(){

    // 百度地图API功能
    var map = new BMap.Map("shopMap");            
    map.centerAndZoom("昆明",12);
    map.enableScrollWheelZoom(true);
    //单击获取点击的经纬度
    map.addEventListener("click",function(e){
        $("#longitude").val(e.point.lng);
        $("#latitude").val(e.point.lat);
    });
}

转载于:https://www.cnblogs.com/wdlove/p/4522029.html

你可能感兴趣的文章
Luogu P3919【模板】可持久化数组(可持久化线段树/平衡树)
查看>>
一个简单的计算分数的小程序
查看>>
sql注入的防护
查看>>
web安全之SQL注入
查看>>
9.leetcode70-climbing stairs
查看>>
常用算法之----选择排序
查看>>
[原创]ConsoleApplication ProgressBar
查看>>
5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用
查看>>
Confluence 6 在你用户宏中使用参数
查看>>
Confluence 6 查看空间活动需要注意的地方
查看>>
Java 本地环境设置
查看>>
poj 2187-Beauty Contest解题报告
查看>>
C#中的Delegate
查看>>
Clickjacking(点击劫持)
查看>>
【Henu ACM Round#15 B】A and B and Compilation Errors
查看>>
[数据结构] 几种排序算法
查看>>
Processing中和值域相关的函数
查看>>
ORACLE基础学习(2)-SQL语句
查看>>
Linux操纵系统下的Oracle数据库编程详解
查看>>
FullerScreen-Firefox 全屏表现扩展
查看>>