百度 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. ...
随机推荐
- 第一篇-生成可运行得exe文件
1. 项目 --> 属性 2. 配置 -->Release 3. 如果可以在其他电脑运行可以不进行下面的,如果不能运行,选择代码生成-->运行库-->MT 4. 完成上述步骤后 ...
- unittest 框架-待优化
模块1 :getdata.py 读取测试用例test_case.xlsx,返回测试用例结果 import json from openpyxl import load_workbook class D ...
- spring Boot 入门--为什么用spring boot
为什么用spring boot 回答这个问题不得不说下spring 假设你受命用Spring开发一个简单的Hello World Web应用程序.你该做什么? 我能想到一些 基本的需要. 一个项目 ...
- 001 Lua相关链接
Lua官网:http://www.lua.org/ Lua for windows地址:http://www.lua.org/download.html Lua教程:http://www.runoob ...
- JetBrain server certificate is not trusted 弹出框
To get rid of the pop up message go to below location and click on Accept non-trusted certificates a ...
- PHP带参数传值调用python脚本
PHP主要用在服务器端做网站后台开发,有些功能用PHP来实现有点费劲或者无法实现,现在在学习python,同样是脚本语言,感觉python能做的事情PHP不一定能胜任.但是现在大部分的网站后台也是用P ...
- （五）聊一聊深Copy与浅Copy
一.关于浅copy与深copy 首先说明一下: 在python中,赋值其实就是对象的引用,变量就是对象的一个标签,如果把内存对象比喻成一个个房间,那么变量就是门牌号. 深copy与浅copy只是针对可 ...
- 在Windows2008r2 安装.net4.5
WebApi 是比较高的环境下面开发 需要的环境是net4.5 或以上. Windows2008r2 里面没有这个环境必须自己安装.安装net4.5 必须sp1环境以上才能安装. 将Windows20 ...
- temp 和 tmp 文件
TMP和TEMP文件是各种软件或系统产生的临时文件,也就是常说的垃圾文件.Windows产生的临时文件,本质上和虚拟内存没什么两样,只不过临时文件比虚拟内存更具有针对性,单独为某个程序服务而已.而它的 ...
- eclipse快速查看工程代码行数
1.点击要统计的项目或许文件夹,在菜单栏点击Search,然后点击File... 2.选中正则表达式(Regular expression),并在搜索文本框输入\n ;3.在文件名中输入*或*.jav ...