javascript 百度地图API - demo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
height: 100%
} body {
height: 100%;
margin: 0px;
padding: 0px
} #container {
height: 100%
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx">
</script>
</head>
<body>
<div id="container" style="width: 420px; height: 340px; border: 1px solid gray; float: left;"></div>
<p>
纬度:<input name="lng" type="text" id="lng" style="width:200px;" value="120.570464"/>
经度:<input name="lat" type="text" id="lat" style="width:200px;" value="31.300216"/>
标注点所在区域:<input name="address" type="text" id="address" style="width:200px;"/>
</p>
<script type="text/javascript">
// http://lbsyun.baidu.com/jsdemo.htm#a1_2 var map = null;
var initialFunc = function(){
map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用 // 自定义控件
map.addControl(new myTest.ZoomControlX()); map.addEventListener("click", function(e){
console.log(e.point.lng + ", " + e.point.lat);
console.log("您点击了地图。");
}); // 拖动地图后地图中心的经纬度信息
map.addEventListener("dragend", function(){
var center = map.getCenter();
console.log("地图中心点变更为:" + center.lng + ", " + center.lat);
}); var zoomendFunc = function(){
console.log("地图缩放至:" + this.getZoom() + "级");
// 移除监听事件
map.removeEventListener("zoomend", zoomendFunc);
};
map.addEventListener("zoomend",zoomendFunc); // 标注功能:拖动、打标注
myTest.markerTest(map); // 浏览器定位
myTest.geolocation(map);
}; var myTest = {
geolocation : function(map) {
//关于状态码
//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 新增)
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);
console.log('您的位置:'+r.point.lng+','+r.point.lat);
}
else {
console.log('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
},
// 根据坐标获取地址
geocoder : function Geocoder(point) {
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
document.getElementById('address').setAttribute('value',addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
},
markerTest : function(map){
// 新坐标
map.clearOverlays();
var pointNew = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(pointNew); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(pointNew);
marker.enableDragging(); // 可以拖动
//创建信息窗口
var infoWindow = new BMap.InfoWindow("这就是您公司的位置。<br/>如果不正确,请拖动红色图标");
//显示窗口
marker.openInfoWindow(infoWindow);
//点击监听
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
//拖动监听
marker.addEventListener("dragend", function (e) {
//坐标赋值
document.getElementById('lng').setAttribute('value',e.point.lng);
document.getElementById('lat').setAttribute('value',e.point.lat);
myTest.geocoder(e.point);
});
},
ZoomControlX : ((function(){
// 定义一个控件类,即function
function ZoomControl(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control(); // 自定义控件必须实现initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div"); // 添加文字说明
div.appendChild(document.createTextNode("放大2级")); // 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white"; // 绑定事件,点击一次放大两级
div.onclick = function(e){
map.zoomTo(map.getZoom() + 2);
} // 添加DOM元素到地图中
map.getContainer().appendChild(div); // 将DOM元素返回
return div;
}
return ZoomControl; })()), }; initialFunc();
</script>
</body>
</html>
javascript 百度地图API - demo的更多相关文章
- C#调用百度地图API经验分享(一)
最近客户提了一个需求,要在网站中添加百度地图的显示,其实原来是有谷歌地图的,但由于谷歌在大陆遭到封杀,只好再给用户增加一个选择了. 下面我将自己最近整理的一些知识分享给大家. 如何使用百度地图API: ...
- 百度地图api窗口信息自定义
百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...
- 百度地图API的自动定位和搜索功能(移动端)
近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...
- 百度地图API的使用示例
刚刚工作的时候写过百度地图API文档,那时候没有记录到技术博客里面,今天在群里看见有个姑娘在问这个问题,重温了一遍,这个API还算好用.百度地图API,集成简单好用,全面,兼容问题,文档全面: 官方文 ...
- javascript百度地图使用(根据地名定位、根据经纬度定位)
需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html? ...
- vue项目使用百度地图API获取经纬度
一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...
- 百度地图API试用--(初次尝试)
2016-03-17: 百度地图API申请key的步骤相对简单,不做过多阐述. 初次使用百度地图API感觉有点神奇,有些功能加进来以后有点问题,注释掉等有空再解决. 代码如下: <%@ page ...
- 如何在网页中调用百度地图api
我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...
- 百度地图API多个点聚合时,标注添加的标签label地图刷新就丢失的问题解决
当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合A ...
随机推荐
- 【原】Python 用例:二进制写入和读取文件内容
import pickle as p shoplistfile='shoplist.data' shoplist=['apple','carrot'] # because the dump opera ...
- Java中迭代器
任何容器类,都必须有某种方法可以插入元素并将它们再次取回,毕竟,持有事物是容器最基本的工作,对于List,add()是出入元素的方法之一,而get()是取出元素的方法之一. 如果从更高层的角度思考,会 ...
- Chrome开发者工具不完全指南:(三、性能篇)
卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...
- VS2013常用快捷键你敢不会?
F1 帮助文档 F5 运行 F12 跳转到定义 F11 单步调试 Shift+F5 停止调试 Ctrl+滚轮 放大缩小当前视图 Ctrl+L 删除当前行 Ctrl+K,Ctrl+C 注释选中代码 Ct ...
- 控制对话框风格的activity的显示大小与位置
项目开发的需要,因为到现在项目接近完工,用户提出对条件筛选方式进行修改,为做到最小的改动实现用户的需求,各种百度,对于对话框风格大家普遍使用PopupWindow,但由于之前开发设计时使用的是acti ...
- Android探索之HttpURLConnection网络请求
前言: 最近一直想着学习一下比较好的开源网络框架okhttp,想着学习之前还是先总结一下Android原生提供的网络请求.之前一直在使用HttpClient,但是android 6.0(api 23) ...
- 苹果系统安装虚拟机 Mac如何安装虚拟机教程
1.前言 大家在用 Mac 系统的时候,可能有时难免还是要用到 Windows 系统.在 Mac 上使用 Windows 系统有二种方法.一种是在 Mac上安装双系统,适合要在机器上处理一些大型 ...
- 应用程序框架实战十一:创建VS解决方案与程序集
上一篇,介绍了开发环境需要的工具和版本,本篇将动手创建VS解决方案. 对于本系列文章提供的示例,我想通过两种途径来演示,一种是单元测试,另外为了能更直观的看到效果,还会提供一个用户界面来展示.为了不分 ...
- JSP页面静态化
Ps:好久没写博客了,不是我太懒,是因为苦逼的我出差去上海了,天天加班 刚回成都.... 今天说说jsp页面静态化,知道静态化的朋友都不陌生,说白了就是访问后缀是html 而不是jsp. 没听说过静态 ...
- iOS开发之版本控制(SVN)
版本控制对于团队合作显得尤为重要,那么如何在iOS开发中进行版本控制呢?在今天的博客中将会介绍如何在MAC下配置SVN服务器,如何导入我们的工程,如何在Xcode中进行工程的checkOut和Comm ...