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 相关文章推荐
IE与FireFox中的childNodes区别
Oct 20 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
jQuery定义插件的方法
Dec 18 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
JavaScript数组方法总结分析
May 06 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
vue+spring boot实现校验码功能
May 27 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之apc
2013/05/15 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Vue与React的区别和优势对比
2020/12/18 Vue.js
举例介绍Python中的25个隐藏特性
2015/03/30 Python
详细探究Python中的字典容器
2015/04/14 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python对List中的元素排序的方法
2018/04/01 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
利用python求积分的实例
2019/07/03 Python
Python logging设置和logger解析
2019/08/28 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
DBA的职责都有哪些
2012/05/16 面试题
绩效工资分配方案
2014/01/18 职场文书
党支部换届选举方案
2014/05/08 职场文书
大学自主招生推荐信
2014/05/10 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
殡葬服务心得体会
2014/09/11 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
Go归并排序算法的实现方法
2022/04/06 Golang
python处理json数据文件
2022/04/11 Python
Spring中的@Transactional的工作原理
2022/06/05 Java/Android