百度地图拖动标注后获取坐标

本来想用图吧的API来做的,结果弄了下,在手机上弄不了。换用百度地图了。。本功能个人觉得在很多地方用到,先记下来,省得每次都得翻地图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=fjEOTea6oQGEcK1GSUHruG4efO9fccei"></script>
    <title>设置点是否可拖拽</title>
</head>
<body>
    <div id="l-map"></div>
    <!--<div id="r-result">
        <input type="button" onclick="marker.enableDragging();" value="可拖拽" />
        <input type="button" onclick="marker.disableDragging();" value="不可拖拽" />
    </div>-->
</body>
</html>
<script type="text/javascript">
 // 百度地图API功能

//浏览器定位
 var geolocation = new BMap.Geolocation();
 geolocation.getCurrentPosition(function (r) {
     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
         var map = new BMap.Map("l-map");
        // var point = new BMap.Point(116.400244, 39.92556);
         map.centerAndZoom(r.point, 12); //定义地图等级,就是放大倍数
         map.enableScrollWheelZoom(true); //启用地图滚轮放大缩小  
         var marker = new BMap.Marker(r.point);// 创建标注
         map.addOverlay(marker);  // 将标注添加到地图中
         map.panTo(r.point);
        // alert(‘您的位置:‘ + r.point.lng + ‘,‘ + r.point.lat);
          
         marker.enableDragging(); //标注可拖拽
         //marker.disableDragging();           // 不可拖拽

// 开启事件监听
         marker.addEventListener("dragend", function (e) {

var x = e.point.lng; //经度
             var y = e.point.lat; //纬度
             alert("拖到的地点的经纬度:" + x + "," + y);

});
     }
     else {
         alert(‘failed‘ + this.getStatus());
     }
 }, { enableHighAccuracy: true })

//关于状态码
    //BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
    //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
    //BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
    //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
    //BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
    //BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
    //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
    //BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
    //BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
</script>

在线查看:http://niaoren.niunan.net/drop_baidumap.html

时间: 2024-08-25 16:52:46

百度地图拖动标注后获取坐标的相关文章

百度地图根据输入地址获取坐标

首先新建一个html页面,然后引用百度地图api: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>根据地址查询经纬度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="tex

百度地图的使用之获取数据库表中信息的坐标点显示在地图上

//通用封装好的js: var map = new BMap.Map("container"); //建树Map实例 var point = new BMap.Point(103.976032, 33.845509); // 建树点坐标 map.centerAndZoom(point, 6); // 初始化地图,设置中心点坐标和地图级别. //地图事件设置函数: map.enableDragging(); //启用地图拖拽事件,默认启用(可不写) map.enableScrollWhe

百度地图API标注+时间轴组合

百度地图API标注+时间轴组合 到新公司实习第八天,Boos让我结合百度地图api做一个动态展示标注变化的组件,要求地图展示某一天的标注,时间轴要求可以动态播放每一天的标注变化...然后我就开始coding... 准备工作: 申请百度api密钥(具体方法我也不多写了,大家应该都会) 了解一下百度地图API的开发指南和类参考文档(如果嫌麻烦的话 可以直接看Demo示例) 一.首先,先加载地图,你可以用实际的经纬度定位.浏览器定位.根据ip定位.根据城市名定位,这个你可以自己选择 // 创建Map实

PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例

原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程序--> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <?php $jingwei="new BMap.Point($lon

【百度地图API】如何获取行政区域的边界?

原文:[百度地图API]如何获取行政区域的边界? 摘要:以前教过大家如何自行获取行政区域,或者自定义获取一个区域的边界值.今天来教大家直接调用百度地图API1.3(目前最新版本)来获取行政区域的边界值. -------------------------------------------------------------------------------------- 一.建立地图 创建地图对象:设立中心点. var map = new BMap.Map("container")

解决在EasyUI中使用百度地图出现不居中和坐标图标显示异常的问题(红色代码部分)

问题: 1.加载指定经纬度的坐标点怎么都不居中显示,总是显示在左上角,需要在地图加载完后拖动才看到指定的坐标点: 2.显示的坐标点图片没有正常显示,后面使用了自定义坐标图片(如图): 解决后: 参考: 1.百度地图API类:http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB 2.自定义图标这里有:http://blog.csdn.

百度地图定位,标注以及地图中心点问题

关于百度地图的相关配置以及库的合并方法请查看官方文档,上面说的很详细, 下面是在配置好的基础上进行的. 1.引入百度地图的库的头文件 //百度地图    #import <BaiduMapAPI/BMapKit.h>    #import <BaiduMapAPI/BMKMapView.h> 2.我是直接使用xib进行开发的,我直接让当前显示地图的view继承自BMKMapView,建立属性连接 @property (strong, nonatomic) IBOutlet BMKM

项目中的百度地图添加标注,动态弹框

1.最近项目开发中,用到了地图,需求是使用百度地图 初始化地图: var list = ""; var map = ""; var drawingManager = ""; if (typeof (BMap) == 'undefined') { //地图加载失败 document.getElementById("allmap").innerHTML = "地图加载失败"; } else { /** 百度地图

从百度地图API接口批量获取地点的经纬度

今天我同事要做一个规划,需要获取Excel中的2000多个地址的经纬度.问我有没有办法,正好我这段时间学习 Python,想了一下,觉得可以.于是就写了一个以下的代码.刚开始觉得差不多两个小时可以搞定,结果花费了半天多,汗...主要是在卡从百度地图 API获取的是坐标总是不对.后来网上查资料才明白,原来从百度API获取的是墨卡托坐标,而实际使用的是WGS84坐标. 1 #!/usr/bin/python 2 #coding:utf-8 3 4 import xlrd 5 import xlwt