百度地图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 相关文章推荐
用Juery网页选项卡实现代码
Jun 13 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
原生js实现轮播图
Feb 27 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
vuex的使用步骤
Jan 06 Vue.js
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 gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
YII框架http缓存操作示例
2019/04/29 PHP
javascript中的几个运算符
2007/06/29 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
通过Python 接口使用OpenCV的方法
2018/04/02 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
信号生成及DFT的python实现方式
2020/02/25 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
小学生暑假感言
2014/02/06 职场文书
大学生自我鉴定书
2014/03/24 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
学习十八大宣传标语
2014/10/09 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
前台接待员岗位职责
2015/04/15 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
python关于集合的知识案例详解
2021/05/30 Python
Django实现drf搜索过滤和排序过滤
2021/06/21 Python