百度地图

解释

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

百度地图|高德地图

使用步骤

1. 登录注册，获取密钥AK

2. 引入百度地图js

   <script src="http://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你自己的AK"></script>
   

3. 创建地图的容器

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

4. 初始化地图

   var map=new BMap.Map("container")
   

5. 创建一个地图中心点

   var point new BMap.Point(经度，纬度)
   

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(经度，纬度);
// 创建标记
var  m = new BMapGL.Marker(p);	

线

var polyline = new BMapGL.Polyline(line,{
strokeStyle:"dashed",
strokeColor:"blue", 
strokeWeight:2, 
strokeOpacity:0.5});
// strokeColor代表线的颜色
// strokeWeightr代表线的宽度
// strokeOpacity代表线的透明度

面

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 opts = {
          width: 250,     // 信息窗口宽度
          height: 100,    // 信息窗口高度
          title: "Hello"  // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow(`<p>前端很简单</p>`);
    map.openInfoWindow(infoWindow, point);
    marker.addEventListener("click", e => {
        map.openInfoWindow(infoWindow, point)//点击打开窗口信息
    })
})

搜索功能

<input type="" value="" onchange="search(this)">// 绑定事件


var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(113.665,34.784);  // 创建点坐标 
map.centerAndZoom(point, 15); 
map.enableScrollWheelZoom(true);
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
var local = new BMapGL.LocalSearch(map,{
	renderOptions:{map:map}
});
function search(e){
	local.search(e.value)
}

监听事件

添加事件

单击事件：map.addEventListener('click', function(e) { alert('click!') });

双击事件：map.addEventListener('dbclick', function(e) { alert('click!') });

移除事件

map.removeEventListener('click', 函数);

vue中使用百度地图

1.public->index.js导入百度地图；

2.src->router->index.js 对路由进行配置；

3.src->views中建立地图引入的视图及容器。