百度地图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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
js添加绑定事件的方法
May 15 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 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
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
用jscript启动sqlserver
2007/06/21 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
python os.listdir()乱码解决方案
2021/01/31 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
仓库管理制度
2014/01/21 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
亮剑观后感600字
2015/06/05 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
创业计划书之酒厂
2019/10/14 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Python编程super应用场景及示例解析
2021/10/05 Python