文档章节

百度地图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
百度地图新手教程1(转载自百度)

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

长平狐
2013/01/06
3.8K
0
BMap:WEB 服务API

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

吞吞吐吐的
2017/11/07
0
0
在Android项目里如何调用基于百度地图API实现定位

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

android开发
2017/12/08
0
0
前端框架Vue(9)——百度地图使用

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

docallen
2017/04/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Function函数式接口

Function函数式接口传入一个参数,返回一个值。 然后我们使用这个写个demo看看: 输出: 接口内部还有两个default方法和一个static方法,然后我们先看一下static方法 返回一个始终返回其输入...

woshixin
12分钟前
0
0
开发者和架构师之间最大的区别是什么?

1、开发者和架构师之间最大的区别是什么? 架构师和开发者一样,也经常写代码,简单的说,开发者和架构师之间最大的区别就是技术领导力。 软件架构师的角色需要理解最重要的架构驱动力是什么...

James-
43分钟前
2
0
java框架学习日志-4

补充一些spring配置文件的方法。 设置别名: <!--通过name直接设置别名--> <bean name="user2" class="cn.sxt.factory.UserDynamicFactory"> </bean> <!--有id的情况下也可以设置......

白话
45分钟前
2
0
20181213 上课截图

小丑鱼00
今天
1
0
nginx+php-fpm配置后页面显示空白的解决方法以及用nginx和php-fpm解决“502 Bad Gateway”问题

https://stackoverflow.com/questions/15423500/nginx-showing-blank-php-pages For reference, I am attaching my location block for catching files with the .php extension: location ~......

Yao--靠自己
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部