百度 Javascript开发 API
一.在手机wap上滑动地图，标准点在最中心位置
map.getCenter()
1.当移动地图时，点同时移动，获取屏幕中心点
<!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%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=25eb303c9c5df0ec2424fa86816437da"></script>
<title>拖拽地图，标注点始终在屏幕最中心点</title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.enableDragging(); // 支持拖拽 // 地图拖拽加载完成
map.addEventListener("tilesloaded", function () {
map.clearOverlays(); // 清除标注点
var point = new BMap.Point(map.getCenter().lng, map.getCenter().lat);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
//将标注点保存在DOM 中
$("#point").attr('lng',map.getCenter().lng);
$("#point").attr('lat',map.getCenter().lat);
}); </script>
</body>
</html>
2.当移动地图时，点始终定位在屏幕最中心
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的地址</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=25eb303c9c5df0ec2424fa86816437da"></script> <style>
* {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
body {
background-color: #fff;
}
#footer {
background-color: #ff3f00;
text-align: center;
font-size: 16px;
line-height: 50px;
}
.map_container {
width: 100%;
position: fixed;
/*top: 50px;*/
left: 0;
overflow: auto;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
}
.map_tip {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
top: -155px;
width: 100%;
height: 52px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
justify-content: center;
z-index: 99;
}
.map_tip div.map_address {
background-color: #fff;
display: inline-block;
min-width: 20%;
max-width: 80%;
height: 100%;
line-height: 26px;
font-size: 14px;
border: 1px solid #aaa;
color: #000;
padding: 0 8px;
border-radius: 5px;
position: relative;
z-index: 100;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-box-align: center;
box-align: center;
-webkit-align-items: center;
align-items: center;
}
.map_tip div.map_address:after {
display: block;
content: '';
width: 20px;
height: 20px;
background-color: #fff;
transform: rotate(45deg);
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -10px;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
z-index: 98;
}
.map_tip div.map_address p {
position: relative;
z-index: 99;
}
.map_tip div.map_address p:last-child {
color: #666;
}
.map_tip .map_address_img {
position: absolute;
left: 50%;
bottom: -3.7037037rem;
width: 0.96296296rem;
height: 2.37037037rem;
margin-left: -0.48148148rem;
}
.map_tip .map_address_img img {
width: 100%;
height: 100%;
}
#map {
width: 100%;
}
#allmap {
width: 100%;
height: 100%;
} </style>
</head>
<body>
<div class="map_container">
<div class="map_tip">
<div class="map_address">
<p class="address_name"></p>
<p class="address_info"></p>
</div>
<div class="map_address_img"><img src="http://bpic.588ku.com/element_origin_min_pic/00/46/69/6756d785841e646.jpg" alt=""></div>
</div>
<div id="map">
<div id="allmap"></div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
var height = $(window).height() - $('#header').height() - $('#footer').height();
$('#map').height(height); var map = new BMap.Map("allmap");
var point = new BMap.Point(108.95, 34.27);
map.centerAndZoom(point, 18);
var gc = new BMap.Geocoder();
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
// map.addOverlay(mk);//标出所在地
map.panTo(r.point);//地图中心移动
getInfo(r.point.lng, r.point.lat);
map.addEventListener("moveend", function () {
var new_r = map.getCenter();
getInfo(new_r.lng, new_r.lat);
});
} else {
alert('failed' + this.getStatus());
}
}, {enableHighAccuracy: true}); function getInfo(lng, lat) {
var point = new BMap.Point(lng, lat);//用所定位的经纬度查找所在地省市街道等信息
gc.getLocation(point, function (rs) {
// var info= rs.addressComponents;
$('.address_name').html(rs.address);
// $('.address_info').html(info.district)
});
} </script>
</body>
</html>
二.获取拖拽标注点后的新坐标经纬度
<!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%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=25eb303c9c5df0ec2424fa86816437da"></script>
<title>获取拖拽标注点后的新坐标经纬度</title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.enableDragging(); // 支持拖拽 // 拖拽标注点
marker.addEventListener("dragend", function (e) {
//获取覆盖物位置
var o_Point_now = marker.getPosition();
var lng = o_Point_now.lng;
var lat = o_Point_now.lat;
//$("#point").attr('lng', map.getCenter().lng);
//$("#point").attr('lat', map.getCenter().lat); });
</script>
</body>
</html>
*注： map.addEventListener("dragend", function (e)…… 表示地图拖拽
marker.addEventListener("dragend", function (e)…… 表示标注点拖拽
百度 Javascript开发 API的更多相关文章
- 百度地图开发API
JavaScript API http://lbsyun.baidu.com/index.php?title=jspopular
- 百度地图JavaScript开发入门先知
最近项目紧急开发了一些百度地图的功能,觉得百度地图实数强大!于是今天不忙总结一下,看到不错的文章先转载. 文章出处:https://www.opengps.cn/Blog/View.aspx?id=1 ...
- ArcGIS API for JavaScript开发初探——基础知识
1.前言 在ArcGIS Web API开发体系中一共有四大类,分别为: ArcGIS API for Flex ArcGIS API for JavaScript ArcGIS API for RE ...
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图
标签: Android百度地图API Key 分类: Android 百度地图开发(2) 最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地 ...
- ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现
1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...
- ArcGIS API for javascript开发笔记（二）——解决ArcGIS Service中的服务在内网环境下无法进行javascript预览问题
感谢一路走来默默支持和陪伴的你~~~ ----------------------------拒绝转载-------------------------------- 1.问题说明 在使用ArcGIS ...
- ArcGIS API for JavaScript开发初探——HelloMap
1.前言 在开始ArcGIS API for JavaScript开发之前我们需要了解一些基本的知识: 1.开发工具选什么? 前端技术的开发工具选择是一个仁者见仁智者见智的问题,有人喜欢Hbuilde ...
- 百度短信API开发
由于楼主学的是C#,所以目前做的百度短信API是C#版的,废话不说了,直接上代码. public void PostData() { string url = "http://sms.bj. ...
随机推荐
- Mysql 查询当月时间数据
SELECTDATE_FORMAT(CURDATE(), '%Y%m'), DATE_FORMAT(t.transactiontime, '%Y%m'),t.*FROM ttransactions t ...
- vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- Redisson分布式锁实现
转: Redisson分布式锁实现 2018年09月07日 15:30:32 校长我错了 阅读数:3303 转:分布式锁和Redisson实现 概述 分布式系统有一个著名的理论CAP,指在一个分布 ...
- 同样级别iOS程序员，为啥比我菜的程序员薪资都比我高？
前言: 作为程序员,都有一种相同的焦虑——即当一次又一次的新技术浪潮袭来,总会不由自主的拼命跟随,总是担心如果不紧跟新技术的潮流,将会被时代所抛弃. 害怕年龄,害怕平庸,其实只是你在现实里的努力无法支 ...
- ES6-Babel-Browserify使用教程
ES6-Babel-Browserify使用教程 定义package.json文件 { "name" : "es6-babel-browserify", &qu ...
- Springboot集成ECharts
ECharts 是中国的,也是世界的! ECharts官网: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前 绝大部分浏览器(IE8 ...
- 阅读阿里文档总结————Mysql数据库篇
一:建表规范 1.针对于任何字段如果为非负数,必须是 unsigned: 2.表达逻辑删除的字段名 is_deleted,1 表示删除,0 表示未删除: (1为是:0为否) 3.主键索引名为 pk_字 ...
- 人工智能初识(百度ai)
目前的人工智能做了什么? 语音识别:小米的小爱同学,苹果的siri,微软的Cortana语音合成:小米的小爱同学,苹果的siri,微软的Cortana图像识别:交通摄像头拍违章,刷脸解锁手机等视频识别 ...
- VMware 虚拟机 linux执行 ifconfig 命令 eth0没有IP地址(intet addr、Bcast、Mask) UP BROADCAST MULTICAST 问题
VMware 虚拟机 linux执行 ifconfig 命令 eth0没有IP地址(intet addr.Bcast.Mask) UP BROADCAST MULTICAST 问题 eth0:网络接口 ...
- 软工网络15个人作业4——alpha阶段个人总结
软工网络15个人作业4--alpha阶段个人总结 一.个人总结 用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 总结Alpha冲刺过程. 由于直接用 ...