百度地图API之百度地图退拽标记点获取经纬度的实现代码


Posted in Javascript onJanuary 12, 2017

本文给大家分享百度地图api之百度地图退拽标记点获取经纬度的实现方法,具体代码如下所示:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
body, html, #allmap { 
 width: 100%; 
 height: 100%; 
 margin: 0; 
 font-family: "微软雅黑"; 
} 
#l-map { 
 height: 500px; 
 width: 100%; 
} 
#r-result { 
 width: 100%; 
} 
</style> 
<script type="text/javascript" 
 src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 
<title>设置点是否可拖拽</title> 
</head> 
<body> 
 <div id="l-map"></div> 
 <input id="l-map-lng" type="text"/> 
 <input id="l-map-lat" type="text"/> 
</body> 
</html> 
<script type="text/javascript"> 
 // 百度地图API功能 
 var map = new BMap.Map("l-map"); 
 var point = new BMap.Point(116.400244,39.92556); 
 map.centerAndZoom(point, 12); 
 var marker = new BMap.Marker(point);// 创建标注 
 map.addOverlay(marker);  // 将标注添加到地图中 
 marker.enableDragging(); 
 marker.addEventListener("dragend", function(e){ //拖动事件 
 document.getElementById("l-map-lng").value = e.point.lng; 
 document.getElementById("l-map-lat").value = e.point.lat; //打印拖动结束坐标 
 });

如果大家觉得以上介绍的不够详细,大家可以参考下文

以上所述是小编给大家介绍的百度地图API之百度地图退拽标记点获取经纬度的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
关于uniApp editor微信滑动问题
Jan 15 Javascript
js实现微博发布小功能
Jan 12 #Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 #Javascript
canvas实现绘制吃豆鱼效果
Jan 12 #Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 #Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 #Javascript
JS实现仿百度文库评分功能
Jan 12 #Javascript
移动端基础事件总结与应用
Jan 12 #Javascript
You might like
php实现mysql数据库分表分段备份
2015/06/18 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
JS 面向对象的5钟写法
2009/07/31 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
基于jquery实现多选下拉列表
2017/08/02 jQuery
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
pandas数据处理进阶详解
2019/10/11 Python
python 日志 logging模块详细解析
2020/03/31 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
python3中for循环踩过的坑记录
2020/12/14 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
毕业生个人的求职信范文
2013/12/03 职场文书
最新党员思想汇报
2014/01/01 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
公司投资建议书
2014/05/16 职场文书
求职简历自我评价范文
2015/03/10 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
志愿服务心得体会
2016/01/15 职场文书