文档章节

百度地图API应用

a
 ainina
发布于 2015/12/14 19:28
字数 299
阅读 6
收藏 0
< 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:"Microsoft Yahei";}
     </ style >
     < script type = "text/javascript" src = "http://api.map.baidu.com/api?v=2.0&ak=3bb801b79151585f9534ed9ed7ff280d" ></ script >
     < title >BaiduMap</ title >
</ head >
< body >
< div id = "showbd"
     style="position: absolute;
             margin-top:1px;
             width: 800px;
             height: 600px;
             top: 10;
             border: 1px solid gray;
             overflow:hidden;">
</ div >
</ body >
</ html >
< script type = "text/javascript" >
     // 百度地图API功能
     var map = new BMap.Map("showbd");
     map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用
     map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用
     map.addControl(new BMap.NavigationControl());  //初始化地图控件             
     map.addControl(new BMap.ScaleControl());                  
     map.addControl(new BMap.OverviewMapControl());             
     var point=new BMap.Point(114.294672,30.555526);
     map.centerAndZoom(point, 11);//初始化地图中心点
     var marker = new BMap.Marker(point); //初始化地图标记
     
     var json_data = [[114.401,30.915],[114.402,30.915],[114.403,30.915]];
     var pointArray = new Array();
     for(var i=0;i< json_data.length ;i++){
         var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
         map.addOverlay(marker);    //增加点
         var label = new BMap.Label("标注"+i,{offset:new BMap.Size(20,-10)});
         label.setStyle({ 
          display:"none",
     });
         marker.setLabel(label);
         pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
         marker.addEventListener("click",attribute);
         
         marker.addEventListener("mouseover", function(e){ 
                 var p = e .target.getLabel();
                 p.setStyle({ display:"block"});                 
         });
         marker.addEventListener("mouseout", function(e){
             var p = e .target.getLabel();
                 p.setStyle({display:"none"});
         });        
     }
     //让所有点在视野范围内
     map.setViewport(pointArray);
     //获取覆盖物位置
     function attribute(e){
         var p = e .target;
         alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);
     }  
</script>


© 著作权归作者所有

共有 人打赏支持
a
粉丝 0
博文 1
码字总数 299
作品 0
杭州
百度地图首次开放 推出地图开放协议

百度地图近日推出了URI API,即地图开放协议。此举对广大开发者来说,无疑是一个巨大的利好,可实现零成本调用百度地图数据,增强App的位置服务功能,从而提升用户的产品体验,增强用户的使用...

oschina
2012/11/23
3.9K
13
BMap:WEB 服务API

ylbtech-Map-Baidu: WEB 服务API 百度地图Web服务API为开发者提供http/https接口,即开发者通过http/https形式发起检索请求,获取返回json或xml格式的检索数据。用户可以基于此开发JavaScrip...

吞吞吐吐的
2017/11/07
0
0
百度地图新手教程1(转载自百度)

简介 1.什么是百度地图API? 2.面向的读者 3.坐标转换 4.获取API 5.开发移动平台上的地图应用 6.异步加载 7.兼容性 8.版本说明 9.问题解答 什么是百度地图API? 百度地图API是一套由JavaScr...

长平狐
2013/01/06
3.7K
0
前端框架Vue(9)——百度地图使用

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图...

docallen
2017/04/27
0
0
在Android项目里如何调用基于百度地图API实现定位

在Android项目里如何调用基于百度地图API实现定位,基于地理位置服务的Android平台的开发对Android移动开发来说是非常重要的,基于地理位置服务的Android平台的开发是主要用于Android系统作为...

android开发
2017/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊clean code

clean code,顾名思义就是整洁的代码,或者说清晰、漂亮的代码,相信大多数工程师都希望自己能写出这样的代码。 也许这是个千人千面的话题,每个工程师都有自己的理解。比如我,从一个天天被...

Skqing
6分钟前
0
0
redis连接报错—— (error) NOAUTH Authentication required.

1.redis报认证错误 redis客户端连接成功,但是操作报异常——(error) NOAUTH Authentication required 错误的含义是说你没有认证,说明没有使用密码连接 redis-cli -h 127.0.0.1 -p 6379 -a ...

啊哈关关
12分钟前
0
0
地理位置坐标标准以及转换

/** * 地理位置坐标标准以及转换 * * 1.WGS-84原始坐标系,一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Google和高德地图定位的的经纬度(国外)都是基于W...

葉者
14分钟前
0
0
Generator-ES6

基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。 Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装...

简心
32分钟前
4
0
FullCalendar日历插件说明文档

普通显示设置 属性 描述 默认值 header 设置日历头部信息。 如果设置为false,则不显示头部信息。包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置: title: 显示当...

ada_young
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部