百度地图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继承 Base类的源码解析
Dec 30 Javascript
JavaScript 数组循环引起的思考
Jan 01 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
JavaScript实现旋转木马轮播图
Mar 16 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 adodb连接不同数据库
2009/03/19 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
深入浅析php json 格式控制
2015/12/24 PHP
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python入门篇之条件、循环
2014/10/17 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python3 爬取图片的实例代码
2018/11/06 Python
django ajax发送post请求的两种方法
2020/01/05 Python
python判断正负数方式
2020/06/03 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
《七颗钻石》教学反思
2014/02/28 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
小学生读书笔记范文
2015/06/30 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
MySQL导致索引失效的几种情况
2022/06/25 MySQL