1、申请百度账号和ak

2、准备页面

3、添加meta标签方便在移动平台上展示

4、引用百度地图API文件

5、创建地图容器元素设置容器样式大小

6、创建地图实例

7、设置中心点坐标

8、地图初始化，同时设置地图展示级别

9、开启鼠标滚轮缩放

10、设置地图的旋转角度和倾斜角度

11、变更地图类型为地球

12、声明控件并添加到地图中

13、向地图中添加标注

14、监听标注事件

15、添加折线

16、添加多边形

17、向地图中添加文本标注

18、修改文本标注样式

19、向地图中添加信息窗口

20、定位

浏览器定位

IP定位

定位SDK辅助定位

1、申请百度账号和ak

2、准备页面

3、添加meta标签方便在移动平台上展示

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

4、引用百度地图API文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">

5、创建地图容器元素设置容器样式大小

<style type="text/css">  html{height:100%}    body{height:100%;margin:0px;padding:0px}    #container{height:100%}
</style>

6、创建地图实例

var map = new BMapGL.Map("container");

7、设置中心点坐标

这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）

var point = new BMapGL.Point(116.404, 39.915);
注意：在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法。

8、地图初始化，同时设置地图展示级别

在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作

map.centerAndZoom(point, 15);

9、开启鼠标滚轮缩放

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

10、设置地图的旋转角度和倾斜角度

地图可以自定义旋转角度和倾斜角角度

map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{enableRotate: false,enableTilt: false
});

11、变更地图类型为地球

map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

12、声明控件并添加到地图中

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

13、向地图中添加标注

var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point);        // 创建标注
map.addOverlay(marker);                     // 将标注添加到地图中

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {   // 指定定位位置。  // 当标注显示在地图上时，其所指向的地理位置距离图标左上   // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  // 图标中央下端的尖角位置。   anchor: new BMapGL.Size(10, 25),   // 设置图片偏移。  // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  // 需要指定大图的偏移位置，此做法与css sprites技术类似。   imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
});     // 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);

14、监听标注事件

marker.addEventListener("click", function(){   alert("您点击了标注");
});

15、添加折线

var polyline = new BMapGL.Polyline([new BMapGL.Point(116.399, 39.910),new BMapGL.Point(116.405, 39.920),new BMapGL.Point(116.425, 39.900)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

16、添加多边形

var polygon = new BMapGL.Polygon([new BMapGL.Point(116.387112,39.920977),new BMapGL.Point(116.385243,39.913063),new BMapGL.Point(116.394226,39.917988),new BMapGL.Point(116.401772,39.921364),new BMapGL.Point(116.41248,39.927893)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

17、向地图中添加文本标注

var point = new BMapGL.Point(116.404, 39.915);
var content = "label";
var label = new BMapGL.Label(content, {       // 创建文本标注position: point,                          // 设置标注的地理位置offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
})
map.addOverlay(label);                        // 将标注添加到地图中

18、修改文本标注样式

var point = new BMapGL.Point(116.404, 39.915);
var content = 'label';
var label = new BMapGL.Label(content, {       // 创建文本标注position: point,offset: new BMapGL.Size(10, 20)
})
map.addOverlay(label);                        // 将标注添加到地图中
label.setStyle({                              // 设置label的样式color: '#000',fontSize: '30px',border: '2px solid #1E90FF'
})

19、向地图中添加信息窗口

var opts = {width: 250,     // 信息窗口宽度height: 100,    // 信息窗口高度title: "Hello"  // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

20、定位

浏览器定位

var map = new BMapGL.Map("allmap");var point = new BMapGL.Point(116.331398,39.897445);map.centerAndZoom(point,12);var geolocation = new BMapGL.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMapGL.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);alert('您的位置：' + r.point.lng + ',' + r.point.lat);}else {alert('failed' + this.getStatus());}        });

IP定位

var map = new BMapGL.Map("allmap");var point = new BMapGL.Point(116.331398,39.897445);map.centerAndZoom(point,12);function myFun(result){var cityName = result.name;map.setCenter(cityName);alert("当前定位城市:" + cityName);}var myCity = new BMapGL.LocalCity();myCity.get(myFun);

定位SDK辅助定位

var map = new BMapGL.Map("allmap");var point = new BMapGL.Point(116.331398,39.897445);map.centerAndZoom(point,12);var geolocation = new BMapGL.Geolocation();// 开启SDK辅助定位geolocation.enableSDKLocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);alert('您的位置：' + r.point.lng + ',' + r.point.lat);}else {alert('failed' + this.getStatus());}        });

百度地图开发者使用教程相关推荐

百度地图3.2教程（2）公交查询
上一篇地址百度地图3.1教程-检索功能演示还记得两天前我在找公交接口,非常不幸.接口有些查不到,几年的前的数据,哎 .算了呗,突然想起来了百度地图有这个功能,结果去看了API,尼玛这API 改的 ...
Android百度地图开发入门教程
Android百度地图开发入门教程 1.平台注册登录 2.创建应用 3.Android studio配置 4.代码编写 5.最终效果(建议真机) 1.平台注册登录登录百度地图开放平台网站注册并登录 ...
Android百度地图API使用教程
课1 百度地图应用百度地图.ppt 百度地图API:API文档 http://wiki.lbsyun.baidu.com/cms/androidsdk/doc/v3_2_0/ 67个类:其中6大核心 ...
百度地图开发者平台的使用
我们在做地图的时候不太可能自己去写一个地图,所以我们就用到了百度地图的开发平台 1.在浏览器中搜索百度地图开发者平台 2.进入网站找到开发者文档并进入JavaScript API 中(如果没有百度账号 ...
申请百度地图开发者AK和基本使用
前言有需求就会有市场,百度地图也会开放一些免费的Api.来提供一些基本的地图服务. 今天我们讲解的是百度地图申请AK过程,和申请完之后基本的使用,方便大家日后有需要浏览. AK-申请 1.首先我们学 ...
百度地图开发者账号申请
本篇文章要完成的效果一.百度地图开发者账号申请官网 : 百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 没有的话注册一下一般来说使用过百度云就有百度账号点 ...
百度地图开发者平台普通IP定位功能详解
前端时间业务需求,进而去了解IP定位的功能,一开始使用的免费API接口,但是几天时间接口就访问失效,了解到百度地图也有IP定位功能,所以记录使用的过程. 一.注册百度地图开发者,并创建应用在创建应用 ...
百度地图-新手入门教程
百度地图介绍 LBS:location Bussiness Server 基本地理位置的服务开发百度地图的北斗定位,可以让开发者轻松实现安全.精准.稳定的定位功能,企业级可视化服务解决方案,实现点线 ...
android 百度地图 uisettings,百度地图开发者常用类学习
1.类MapView public final class MapView extends ViewGroup 一个显示地图的视图(View).它负责从服务端获取地图数据.它将会捕捉屏幕触控手势事件. ...

百度地图开发者使用教程

1、申请百度账号和ak

2、准备页面

3、添加meta标签方便在移动平台上展示

4、引用百度地图API文件

5、创建地图容器元素设置容器样式大小

6、创建地图实例

7、设置中心点坐标

8、地图初始化，同时设置地图展示级别

9、开启鼠标滚轮缩放

10、设置地图的旋转角度和倾斜角度

11、变更地图类型为地球

12、声明控件并添加到地图中

13、向地图中添加标注

14、监听标注事件

15、添加折线

16、添加多边形

17、向地图中添加文本标注

18、修改文本标注样式

19、向地图中添加信息窗口

20、定位

浏览器定位

IP定位

定位SDK辅助定位

百度地图开发者使用教程相关推荐

最新文章

热门文章

百度地图开发者使用教程

1、申请百度账号和ak

2、准备页面

3、添加meta标签 方便在移动平台上展示

4、引用百度地图API文件

5、创建地图容器元素 设置容器样式 大小

6、创建地图实例

7、设置中心点坐标

8、地图初始化，同时设置地图展示级别

9、开启鼠标滚轮缩放

10、设置地图的旋转角度和倾斜角度

11、变更地图类型为地球

12、声明控件并添加到地图中

13、向地图中添加标注

14、监听标注事件

15、添加折线

16、添加多边形

17、向地图中添加文本标注

18、修改文本标注样式

19、向地图中添加信息窗口

20、定位

浏览器定位

IP定位

定位SDK辅助定位

百度地图开发者使用教程相关推荐

最新文章

热门文章

3、添加meta标签方便在移动平台上展示

5、创建地图容器元素设置容器样式大小