百度地图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 相关文章推荐
js使用心得分享
Jan 13 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
js精确的加减乘除实例
Nov 14 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
vue iview实现动态新增和删除
Jun 17 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
PHP完整的日历类(CLASS)
2006/11/27 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
体育教育毕业生自荐信
2013/11/21 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
数学教学随笔感言
2014/02/17 职场文书
IT工程师岗位职责
2014/07/04 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
微信小程序实现聊天室功能
2021/06/14 Javascript