百度地图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获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
浅析vue component 组件使用
Mar 06 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
Vue的props父传子的示例代码
May 20 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php中this关键字用法分析
2016/12/07 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
Maps Javascript
2007/01/22 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
python中模块查找的原理与方法详解
2017/08/11 Python
Flask数据库迁移简单介绍
2017/10/24 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
详解python编译器和解释器的区别
2019/06/24 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
护理专科毕业推荐信
2013/11/10 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
残疾人小组计划书
2014/04/27 职场文书
幼儿园教师求职信
2015/03/20 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
JavaScript 数组去重详解
2021/09/15 Javascript