百度地图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 图片等比例缩放代码
May 13 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
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中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
Javascript base64编码实现代码
2011/12/02 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
详解webpack-dev-server的简单使用
2018/04/02 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python SQLite3简介
2018/02/22 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
tensorflow 变长序列存储实例
2020/01/20 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
顶岗实习接收函
2014/01/09 职场文书
销售人员自我评价
2014/02/01 职场文书
趣味比赛活动方案
2014/02/15 职场文书
世博会口号
2014/06/20 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
户外活动总结
2015/02/04 职场文书
不同意离婚答辩状
2015/05/22 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers