文档章节

百度地图API应用

a
 ainina
发布于 2015/12/14 19:28
字数 299
阅读 6
收藏 0
点赞 0
评论 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 ⋅ 13

百度地图新手教程1(转载自百度)

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

长平狐 ⋅ 2013/01/06 ⋅ 0

BMap:WEB 服务API

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

吞吞吐吐的 ⋅ 2017/11/07 ⋅ 0

在Android项目里如何调用基于百度地图API实现定位

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

android开发 ⋅ 2017/12/08 ⋅ 0

前端框架Vue(9)——百度地图使用

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

docallen ⋅ 2017/04/27 ⋅ 0

BMap:JavaScript API

ylbtech-Map-Baidu:JavaScript API JavaScript API 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端...

吞吞吐吐的 ⋅ 2017/10/18 ⋅ 0

前端 - 百度地图 API 基础入门

1.前言 最近想完成一个网站,里面需要使用地图相关的内容。 经过多方考虑,决定使用百度地图来完成,所以将整个学习历程进行简单的整理,方便朋友们来快速入门。 本文系作者 李鹏(MR_LP)原...

mr_lp ⋅ 2017/02/20 ⋅ 0

百度地图SDK初步学习——环境配置

最近想在手机上开发地图,做一个TraceMe的应用。主要实现的功能是定位和追踪。 使用IDE是Intellij IDEA 12,和eclipse略有不同。 经过2天的学习,已经实现了定位的功能。 一开始想使用谷歌地...

HenryHsu ⋅ 2013/12/02 ⋅ 0

去百度API的百度地图准确叠加和坐标转换的解决方案研究

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百度提供的接口来...

李晓晖 ⋅ 2015/02/07 ⋅ 0

Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图

最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不多,本篇文章就带领大家在自己的Android项目中加入百度地图的功能,接下来...

等待流星 ⋅ 2013/12/10 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 31分钟前 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 50分钟前 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 59分钟前 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 今天 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 今天 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部