文档章节

百度地图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
在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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

kernel version does not match DSO version

错误信息: kernel version 384.11 does not match DSO version 384.130.0 原因是: cuda driver版本太低,不匹配DSO 简单有效的修复方法,升级nvidia driver, 步骤如下: 1. google seach ...

刘小米
今天
0
0
maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部