百度地图的使用

百度地图的使用

引入

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

初始化地图

var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

百度地图的常用知识

控件

		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 marjer = new BMapGL.Marker(point)
		//添加覆盖物
		map.addOverlay(marjer)
		//存储多个点
		var line = []
		var markers = []

		//监听事件
		map.addEventListener('click', e => {
			//创建点
			var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
			//创建标记
			var m = new BMapGL.Marker(p)
			//添加标记
			map.addOverlay(m)
			//存储点
			line.push(p)
			console.log(e)
		})

		map.addEventListener('dblclick', e => {
			//把第0个点放最后
			line.push(line[0])
			//创建多边形
			var polygone = new BMapGL.Polygon(line, {
			//多边形颜色
				fillColor: 'red',
				//边的颜色
				strokeColor: "blue",
				strokeWeight: 2,
				strokeOpacity: 0.5
			})
			// var polyline = new BMapGL.Polyline(line,{strokeColor:"blue",strokeStyle:"dashed",strokeWeight:2,strokeOpacity:0.5})
			//添加线
			map.addOverlay(polygone)
			//清空点的列表
			line = []
			// stroke线,CoLor颜色，weight粗细，OPacity透明度
			//清空点
			markers.forEach(item => map.removeOverlay(item))
			markers = []
		})

圆

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

添加标签

   //初始化地图
    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 label = new BMapGL.Label("前端学习基地", { //创建文本标注
        position: point, //设置标注的地理位置
        offset: new BMapGL.Size(0, 0) //设置标注的偏移量
    })
    map.addOverlay(label);
    label.setStyle({ //设置label样式
        color: "#000",
        fontSize: "30px",
        border: "1px solid #ccc"
    })

添加信息窗口

	var map = new BMapGL.Map("container");
		var point = new BMapGL.Point(113.665, 34.784);
		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 opts = {
		    width: 250,     // 信息窗口宽度
		    height: 100,    // 信息窗口高度
		    title: "Hello"  // 信息窗口标题
		}
		// var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
		var infoWindow = new BMapGL.InfoWindow(`<p>1111</p>`, opts);  // 创建信息窗口对象
		map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

搜索地址

引入jQuery

	<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

html

<input type="" name="" id="" value="" onchange="search(this)" />
		<div id="container"></div>

js

	var map = new BMapGL.Map("container");
		var point = new BMapGL.Point(113.665, 34.784);
		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 marker = new BMapGL.Marker(point);
		//添加标记
		map.addOverlay(marker);
		//创建一个本地搜索
		var local = new BMapGL.LocalSearch(map, {
			renderOptions: {
				map: map
			}
		})

		function search(e) {
			// 表单值发生变化搜索
			local.search(e.value)
		}

在vue中使用

在src/public/index.js中引入

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

<template>
    <div>
        <h1>百度地图</h1>
        <input type="text" v-model.lazy="keyword">
        <div id="map" ref="map"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            map: null,
            point: null,
            local: null,
            marker: null,
            keyword: '',
        }
    },
    mounted() {
        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);
        this.local = new window.BMapGL.LocalSearch(this.map, {
            renderOptions: { map: this.map }
        });
    },
    watch: {
        keyword: {
            handler() {
                if (this.keyword === '') {
                    this.local.clearResults();
                    this.map.centerAndZoom(this.point, 15);
                } else {
                    this.local.search(this.keyword);
                }
            }
        }
    }
}
</script>

<style>
#map {
    width: 100%;
    height: 80vh;
}
</style>

百度地图开发平台地址：https://lbsyun.baidu.com/