百度地图的基本知识与使用

最新推荐文章于 2024-01-30 14:17:41 发布

不会敲代码的小王ꦿ

最新推荐文章于 2024-01-30 14:17:41 发布

阅读量2.7k

点赞数 2

文章标签： java 服务器前端

本文链接：https://blog.csdn.net/qq_68086484/article/details/127621756

版权

一、解释

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

二、使用步骤：

1、登录注册，获取秘钥AK

2引入百度地图js

3创建地图的容器

4初始化地图

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

5创建一个地图中心点

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

6设置中心点和滚轮缩放

map.enableScrollwheelZoom(true);

map.centerAncZoom(point, 15);鼠标滚轮缩放

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="container">
    </div>
</body>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
    </script>
<script>
    //初始化地图
    var map = new BMapGL.Map("container")
    //准备一个中心点（经度，维度）
    var point = new BMapGL.Point(113.665, 34.784);
    //设置中心点和缩放级别
    map.centerAndZoom(point, 15);
    //鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
</script>
<ml>

三、地图的事件

1、绘制方法

1、点

var point = new BmapGL.Marker(point)

2、线

var polyline = new BmapGL.Polyline(点的数组,线的参数)

3、面

var polygon = new BmapGL.Polygon(点的数组,面的参数)

4、圆

var circle = new BmapGL.Circle(点,米半径,圆的参数)

5、标记

new BMapGL.Label(`内容`,{point:位置,offset:new BMapGL.Size(10, -25) }

6、添加叠加

map.addOverlay(点/线/面)

7、移除

map.remveOverLay(点/线/面)

2、添加点及连线

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="container">

    </div>
</body>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
    </script>
<script>
    //初始化地图
    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 line = []
    var markers = []
    //监听事件
    map.addEventListener("click", e => {
        // 创建点
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        // 创建标记
        var m = new BMapGL.Marker(p);
        markers.push(m)
        // 添加标记
        map.addOverlay(m);
        line.push(p)
        // console.log(e);
    })
    map.addEventListener("dblclick", e => {
        // 创建点
        line.push(line[0]);
        // 创建标记
        var polyline = new BMapGL.Polyline(line, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, strokeStyle: 'dashed' });
        // 添加标记
        map.addOverlay(polyline);
        line = []
        markers.forEach(item => map.removeOverlay(item));
        markers = []
    })
</script>
<ml>

result

3、添加信息窗口

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="container">
    </div>
</body>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
    </script>
<script>
    //初始化地图
    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 opts = {
        width: 160,     // 信息窗口宽度
        height: 260,    // 信息窗口高度
        title: "Hello"  // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow(`<img src='https://img1.baidu.com/it/u=1513139652,3813067304&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1667322000&t=d46a4401b2e1827104434d4b707a4ab5' width='180',height='180'>`, opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

    marker.addEventListener("click", e => {
        //单击显示
        map.openInfoWindow(infoWindow, point)
    })


</script>
<ml>

result

4、添加地图控件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="container">

    </div>
</body>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
    </script>
<script>
    //初始化地图
    var map = new BMapGL.Map("container")
    //准备一个中心点（经度，维度）
    var point = new BMapGL.Point(116.404, 39.915);
    //设置中心点和缩放级别
    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);
</script>
<ml>

result

5、添加标签

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="container">

    </div>
</body>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
    </script>
<script>
    //初始化地图
    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);//将标注添加到地图中

    var circle = new BMapGL.Circle(point, 1000, {
        strokeColor: 'green'
    })
    map.addOverlay(circle);
    label.setStyle({
        color: "red",
        fontSize: "32px",
        border: "2px solid #f00"
    })


</script>
<ml>

result

6、搜素

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <input type="" onchange="search(this)" />
    <!-- 准备容器 -->
    <div id="container">

    </div>
</body>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
    </script>
<script>
    //初始化地图
    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)
    }


</script>
<ml>

result

四、在vue中使用百度地图

1. publicindex.htmlscript引入百度地图

2.在组件中定义data

map: null,//地图

point: null，//中心点

marker: null,//标记

keyword:"",//搜索关键字

local:null,//搜索控件

<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,
            marker: null,
            keyword: '',
            local: null
        }
    },
    mounted() {
        //为什么第三方api需要加window
        //echarts 还是BMapGL都是挂载到window
        //如果直接使用在当前的组件里面没有导入这个BMapGL会报错，也会出来，js会向上查找
        //基本上第三方组件，都需要在mounted组件渲染完毕后在执行初始化（确保js已经加载完毕
        this.map = new window.BMapGL.Map(this.$refs.map);
        this.point = new window.BMapGL.Point(113.665, 34.784);
        this.map.centerAndZoom(this.point, 15);
        this.map.enableScrollWheelZoom(true)
        // this.map.setHeading(30);
        // this.map.setTilt(13);
        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>