百度 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. ...
随机推荐
- 微信公众号开发之access_token的全局共用
最近做微信公众号开发,涉及到access_token的缓存问题(避免各自的应用都去取access_token,同时解决微信 appid和appsecret的安全问题),在通用权限管理系统底层增加了实现 ...
- server.xml配置介绍
server.xml位于$TOMCAT_HOME/conf目录下,是Tomcat中最重要的配置文件,server.xml的每一个元素都对应了Tomcat中的一个组件:通过对xml文件中元素的配置,可以 ...
- Inheritance: 'A' is an inaccessible base of 'B'
'boost::enable_shared_from_this<net::Session>' is an inaccessible base of 'net::Session' BOOST ...
- 在DOS命令中输入ipconfig /all，出现“该命令不是系统内部命令......”
第一种情况:1.先去C:\Windows\System32下查找有没有 ipconfig.exe的执行文件,有的话说明系统文件没有丢失,否则要去网上下载一个 ipconfig.exe文件,并放到C:\ ...
- html css笔记zht
第3章 Img标签 路径问题 绝对路径:从盘符(C:\)出发的路径 (C:\Users\......) linux(绝对路径以 / 开头) 相对路径:( ./ 当前文件所在的目录)( ../上一级目录 ...
- 自定义shiro实现权限验证方法isAccessAllowed
由于Shiro filterChainDefinitions中 roles默认是and, admin= user,roles[system,general] 比如:roles[system,gener ...
- Redis集群管理
1.简介 Redis在生产环境中一般是通过集群的方式进行运行,Redis集群包括主从复制集群和数据分片集群两种类型. *主从复制集群提供高可用性,而数据分片集群提供负载均衡. *数据分片集群中能实现主 ...
- nginx、php-fpm默认配置与性能–TCP socket还是unix domain socket【转】
原文地址:https://www.cnxct.com/default-configuration-and-performance-of-nginx-phpfpm-and-tcp-socket-or-u ...
- spring-cloud-sleuth 和 分布式链路跟踪系统
==================spring-cloud-sleuth==================spring-cloud-sleuth 可以用来增强 log 的跟踪识别能力, 经常在微服 ...
- GCC 警告
-w -W禁止/开启 编译警告的打印.这个警告不建议使用.大约2012年底,公司代码进行一次大重构,另外从Codeblock集成开发环境转向Makefile管理,Makefile里面默认使用了-w,因 ...