百度 Javascript开发 API
一.在手机wap上滑动地图，标准点在最中心位置
map.getCenter()
1.当移动地图时，点同时移动，获取屏幕中心点
拖拽地图，标注点始终在屏幕最中心点
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>
二.获取拖拽标注点后的新坐标经纬度
获取拖拽标注点后的新坐标经纬度
*注： map.addEventListener("dragend", function (e)…… 表示地图拖拽
marker.addEventListener("dragend", function (e)…… 表示标注点拖拽