百度地图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中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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
解析strtr函数的效率问题
2013/06/26 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python简单分割文件的方法
2015/07/30 Python
python模拟Django框架实例
2016/05/17 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
python正则中最短匹配实现代码
2018/01/16 Python
python调用API实现智能回复机器人
2018/04/10 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
全球度假村:Club Med
2017/11/27 全球购物
高中毕业生的个人自我评价
2014/02/21 职场文书
倡议书范文
2014/04/16 职场文书
白岩松演讲
2014/05/21 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
人才市场接收函
2015/01/30 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
祝酒词范文
2015/08/12 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python