JS实现根据详细地址获取经纬度功能示例


Posted in Javascript onApril 16, 2019

本文实例讲述了JS实现根据详细地址获取经纬度功能。分享给大家供大家参考,具体如下:

这个功能还是比较实用的,记录分享一下:

<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>
  <body style="background:#CBE1FF">
    <div style="width:730px;margin:auto;">
      要查询的地址:<input id="text_" type="text" value="郑州大学" style="margin-right:100px;" /> 查询结果(经纬度):
      <input id="result_" type="text" />
      <input type="button" value="查询" onclick="searchByStationName();" />
      <div id="container" style="position: absolute;
    margin-top:30px;
    width: 730px;
    height: 590px;
    top: 50;
    border: 1px solid gray;
    overflow:hidden;">
      </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);
    }
  </script>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

JS实现根据详细地址获取经纬度功能示例

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
Vue 理解之白话 getter/setter详解
Apr 16 #Javascript
在vue中使用setInterval的方法示例
Apr 16 #Javascript
vue实现局部刷新的实现示例
Apr 16 #Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 #Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 #Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 #Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 #Javascript
You might like
php中数据的批量导入(csv文件)
2006/10/09 PHP
用PHP+MySql编写聊天室
2006/10/09 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
php定界符
2014/06/19 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python 编码处理-str与Unicode的区别
2016/09/06 Python
利用Python破解验证码实例详解
2016/12/08 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Python with语句和过程抽取思想
2019/12/23 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python 实现任务管理清单案例
2020/04/25 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
《月球之谜》教学反思
2014/04/10 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android