百度地图使用简介

最新推荐文章于 2024-04-29 10:42:46 发布

人间散章

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量4.5k

点赞数 5

文章标签： vue.js vue 前端百度

本文链接：https://blog.csdn.net/qq_64750772/article/details/123901916

版权

1、注册百度账号，在登录百度帐号http://lbsyun.baidu.com/apiconsole/key?application=key 页面申请密钥(AK)

2.创建完成后点击控制台、我的应用、创建应用

创建后会有个密钥（AK）这个引入地图是要用

3.页面引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

4.创建一个盛放地图的容器（容器要设置大小不然地图出不来）

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

5.实例化地图和添加控件

<script>
        var map = new BMapGL.Map("container");          // 创建地图实例 
        var point = new BMapGL.Point(113.6648, 34.7835);  // 创建点坐标 
        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>

6.效果图

点线面

点

var marker = new BMapGL.Marker(point);        // 创建标注  point是上面创建的坐标点 
map.addOverlay(marker);                     // 将标注添加到地图中

单击加点

<script>
        var map = new BMapGL.Map("container");          // 创建地图实例 
        var point = new BMapGL.Point(113.6648, 34.7835);  // 创建点坐标 
        map.centerAndZoom(point, 17);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //添加点
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);                     // 将标注添加到地图中

        //添加事件 单击事件
        map.addEventListener("click", e => {
            // console.log(e);
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);    //点击时的坐标点
            //创建一个标记
            var m = new BMapGL.Marker(p);       // 创建标注   
            map.addOverlay(m);     // 将标注添加到地图中
        })

</script>

这时候就可以实现单击加点了

线

    <script>
        var lineArr = [];    //用盛放点的坐标
        var map = new BMapGL.Map("container");          // 创建地图实例 
        var point = new BMapGL.Point(113.6648, 34.7835);  // 创建点坐标 
        map.centerAndZoom(point, 17);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //添加点
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);                     // 将标注添加到地图中

        //添加事件 单击事件
        map.addEventListener("click", e => {
            // console.log(e);
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat); //点击时的坐标点
            //创建一个标记
            var m = new BMapGL.Marker(p);   // 创建标注   
            //添加到数组组件
            lineArr.push(p);        //点击的坐标放到lineArr里面
            map.addOverlay(m);     // 将标注添加到地图中
        })

        //双击事件
        map.addEventListener("dblclick", () => {

            //多边线 strokeColor颜色 strokeWeight线粗细 strokeOpacity线透明度
            var polyline = new BMapGL.Polyline(lineArr, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 })
            //显示线
            map.addOverlay(polyline);
            lineArr = [];    //创建线后将lineArr清空防止想创建多个线出现全部线连在一起的bug

        })
</script>

面

 <script>
        var lineArr = [];
        var last = null;
        var map = new BMapGL.Map("container");          // 创建地图实例 
        var point = new BMapGL.Point(113.6648, 34.7835);  // 创建点坐标 
        map.centerAndZoom(point, 17);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //添加点
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);                     // 将标注添加到地图中

        //添加事件 单击事件
        map.addEventListener("click", e => {
            //有上一个点移除
            last ? map.removeOverlay(last) : '';
            // console.log(e);
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat); //点击时的坐标点
            //创建一个标记
            var m = new BMapGL.Marker(p);   // 创建标注   
            //记录上一个点
            last = m;
            //添加到数组组件
            lineArr.push(p);        //
            map.addOverlay(m);     // 将标注添加到地图中
        })

        //双击事件
        map.addEventListener("dblclick", () => {
            // 移除最后一个点
            map.removeOverlay(last);  

            // 面
            var polygon = new BMapGL.Polygon(lineArr, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "red" })
            //显示线
            map.addOverlay(polygon);
            lineArr = [];

        })
</script>

信息窗口

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个地图</title>
    <style type="text/css">
        /* html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        } */

        #container {
            height: 600px;
            width: 800px;
        }
    </style>


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


</head>

<body>
    <div id="container"></div>
    <script>
        var lineArr = [];
        var last = null;
        var map = new BMapGL.Map("container");          // 创建地图实例 
        var point = new BMapGL.Point(113.6648, 34.7835);  // 创建点坐标 
        map.centerAndZoom(point, 17);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //添加点
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);                     // 将标注添加到地图中

        //画圈
        var circle = new BMapGL.Circle(point, 300, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆
        map.addOverlay(circle);

        // 添加文本标注
        var content = "<strong style='color:red'>中国</strong>前端学习基地";
        var label = new BMapGL.Label(content, {       // 创建文本标注
            position: point,                          // 设置标注的地理位置
            offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
        })
        map.addOverlay(label);
        //信息窗口
        var opts = {
            width: 250,     // 信息窗口宽度
            height: 200,    // 信息窗口高度
            title: "郜郜郜郜郜"  // 信息窗口标题
        }
        //内容
        var content = `<h1>前端月薪过万</h1><p>终身学习爱好者</p><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="120">`
        //信息窗口
        var infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象
        //通过标记添加单击事件。打开信息窗口
        marker.addEventListener("click", e => {
            map.openInfoWindow(infoWindow, point);
        })

    </script>
</body>

</html>

最最最后该介绍在vue中引入百度地图了

在index里面导入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

创建容器

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="container" ref="dom"></div>
  </div>
</template>

实例化地图

<script setup>
import { ref, onMounted } from 'vue'
const dom = ref();
let map;
onMounted(() => {
  // map = new window.BMapGL.Map(dom.value);
  var point = new window.BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(true);

  map.setHeading(64.5);   //设置地图旋转角度
  map.setTilt(73);       //设置地图的倾斜角度

  // 禁止地图旋转和倾斜可以通过配置项进行设置
  map = new window.BMapGL.Map("allmap", {
    enableRotate: false,
    enableTilt: false
  });
})

</script>

人间散章

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
百度地图使用简介

1、注册百度账号，在登录百度帐号http://lbsyun.baidu.com/apiconsole/key?application=key页面申请密钥(AK)2.创建完成后点击控制台、我的应用、创建应用创建后会有个密钥（AK）这个引入地图是要用3.页面引入<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>4....
复制链接

扫一扫