百度地图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 相关文章推荐
Javascript JSQL,SQL无处不在,
May 05 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
Node.js插件安装图文教程
May 06 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
react 组件传值的三种方法
Jun 03 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脚本的10个技巧(1)
2006/10/09 PHP
一个数据采集类
2007/02/14 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
运动会入场解说词
2014/02/07 职场文书
超市活动计划书
2014/04/24 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
家长通知书家长意见
2015/06/03 职场文书
卡特教练观后感
2015/06/08 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android