百度地图的基本使用

解释：

• LBS:LocationBusinessServer 基于定义位置的商业服务
• 百度地图|高德地图
• 百度地图开放平台 | 百度地图API SDK | 地图开发

使用步骤：

01登录注册，获取密钥AK

 

• 02引入百度地图js

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

​

• 03创建地图的容器

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

• 04初始化地图

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

• 05创建一个地图中心点

• var point new BMap.point(经度，纬度）

• 06设置中心点和滚轮缩放

• map.centerAndzoom(point, 1 5);
  ​//鼠标滚轮缩放
  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"

})

移除覆盖物：

map.removeOverlay(覆盖物);

地图的事件：

地图的事件
    map.addEventListener("click",e=>{
    marker.addEventListener(地图覆盖物都可以添加事件）

 在vue中使用地图：

1.public/index.html script引入百度地图

map: null,
                                point: null,
                                marker: null,
                                keyword: "",
                                local: null,

3mounted初始化项目

// 初始化地图
        
                
                        this.map = new window.BMapGL.Map(this.$refs.map);
                        // 准备一个中心点（经度，纬度）
                        this.point = new window.BMapGL.Point(116.404, 39.915);
                        // 设置中心点和缩放级别
                        this.map.centerAndZoom(this.point, 15);
                        // 鼠标滚轮缩放
                        this.map.enableScrollWheelZoom(true);
                        //添加一个点
                        this.marker = new window.BMapGL.Marker(this.point);
                        //添加覆盖物
                        this.map.addOverlay(this.marker);
                        // 百度地图API功能
                        this.local = new window.BMapGL.LocalSearch(this.map, {
                                renderOptions: {
                                        map: this.map

                                }

                        });

                },

4.监听数据变化，更新地图

watch: {
        
                
                        keyword:{
                                handler() {
                                        if (this.keyword === "") {
                                                this.local.clearResults()
                                                this.map.centerAndZoom(this.point, 15);

                                        } else {
                                                this.local.search(this.keyword)

                                        }

                                }

                        }

                }

地图搜索：

local.search(搜索关键字) 

var local = new BMapGL.LocalSearch(map, {
        
 
                        
                                renderOptions: {
                                        map: map

                                }

                        })

可以通过vue地图插件：

vue-baidu-map 170-基于Vue2的百度地图组件库

Vue Baidu Map