百度地图（常用方法）

LBS：locationBusinessServer基于定义位置的商业服务

例如：百度地图、高德地图

使用步骤（百度地图）

1.登录注册获取密钥AK

2.引入百度地图的js

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

3.创建地图的容器

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

4初始化地图

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

5创建一个地图中心点

var point = new BMapGL.Point(113.665, 34.784);

6.设置中心点和滚轮缩放

map.centerAndZoom(point, 15);

map.enableScrollWheelZoom(true)//滚轮缩放

添加地图控制器

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

创建点、线、面，绘制圆

// 创建点

var  p = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
// 创建标记
var  m = new BMapGL.Marker(p);

//创建线

var polyline = new BMapGL.Polyline(line,{strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});

//创建面

var polygone = new BMapGL.Polygon(line,{fillColor:"red",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})

// 绘制圆圈            
var circle = new BMapGL.Circle(point,2000,{strokeColor:"green"});
// 添加圆圈
map.addOverlay(circle);

添加标注

var label = new BMapGL.Label("中国前端学习基地", {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(0, 0)           // 设置标注的偏移量
})  
// 添加标签
map.addOverlay(label);                        // 将标注添加到地图中
// 设置标签的样式
label.setStyle({
    fontSize:"32px",
    color:"red"
})

信息窗口

 var opts = {

        width: 250, //信息窗口宽度

        height: 200, //信息窗口高度

        title: "学好前端,月薪过万"//信息标题

    }

    var infoWindow = new BMapGL.InfoWindow(

        `<P>前端很简单只有<strong>js</strong></p>`,

        opts)

    // 创建信息窗口对象

// map.openInfoWindow(infoWindow, point)//打开窗口

//绑定单击事件

    marker.addEventListener("click", e => {

        map.openInfoWindow(infoWindow, point)

    })

位置检索、周边检索和范围检索

body中加上

<input type="" οnchange="search(this)" />

  //创建一个本地搜索

    var local = new BMapGL.LocalSearch(map, {

        renderOptions: { map: map }

    });

    function search(e) {

        //表单值发生变化时候进行搜索

        local.search(e.value);

    }