百度地图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 相关文章推荐
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
小程序实现搜索框功能
Mar 26 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 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中文乱码的解决方法
2006/12/17 PHP
php 表单数据的获取代码
2009/03/10 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
python解析基于xml格式的日志文件
2017/02/25 Python
Python理解递归的方法总结
2019/01/28 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
python 星号(*)的多种用途
2020/09/21 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
教你打造完美的创业计划书
2014/01/06 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
基督教婚礼主持词
2014/03/14 职场文书
我的小天地教学反思
2014/04/30 职场文书
责任书范本
2014/08/25 职场文书
2014年实习期工作总结
2014/11/27 职场文书
英文产品推荐信
2015/03/27 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA