百度地图(自学)

地图

分类

1. 目前地图应用市场有三家公司:分别为百度地图(),高德地图(),腾讯地图().
2. 对于地图的开发我们简称为lbs:基于地理位置的服务开发

使用百度地图

1. 先去注册百度地图开发者账号,进入控制台
2. 创建地图应用,新建地图
3. 获取AK值,这一步很重要

百度地图开始

1.引用JavaScript

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak="自己的密钥(AK值)">

2.指定容器

<div id="container"></div>

3.初始化

var map = new BMapGL.Map("container");
// 创建地图实例 
var point = new BMapGL.Point(114.35839, 35.92152);
							// 经度		纬度
// 创建点坐标 
map.centerAndZoom(point, 16);
var marker = new BMapGL.Marker(point);        // 创建标注
map.addOverlay(marker);                     // 将标注添加到地图中

4.添加控件(较为重要的)

// 初始化地图，设置中心点坐标和地图级别 
var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);
 map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

绘图

1.绘制点

var marker = new BMapGL.Marker(point);        // 创建标注

2.绘制线

var polyline = new BMapGL. polyline( 参数);        // 创建标注

3.绘制面

var polygon = new BMapGL. polygon( 参数);        // 创建标注

4.绘制圆

var circle = new BMapGL.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(circle); 

5.标记

var label = new BMapGL.Label("汤阴县", {       // 创建文本标注
    position: point,
    offset: new BMapGL.Size(0, 0)
}) 

6.添加叠加

添加叠加
map.addoverlay(点,线,面)

7.移出

移出
map.removeoverlay(点/线/面)

信息窗口

1.选项

var opts = {
    width: 400,     // 信息窗口宽度
    height: 300,    // 信息窗口高度
    title: "xxx欢迎你"  // 信息窗口标题
}

2.定义

var infoWindow = new BMapGL.InfoWindow

3.打开

map.openInfoWindow(infoWindow, map.getCenter());

4.事件监听

1.单击事件

map.addEventListener("click",e=>lnglat

2.双击事件

marker.addEventListener("dblclick",e=>e)

总结

以上就是我自己对于百度地图开发的一些小总结,大家可以批评改正!