草庐IT

【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图（超详细）

前端小媛 2023-04-13 原文

【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图（超详细）

1- 介绍

百度地图功能强大，本篇文章只是对百度地图JavaScript API 进行一个介绍~

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

2- 使用

2-1注册

在使用百度地图之前，要拥有一个自己的百度账号，申请注册成为百度开发者，然后创建一个应用，就可以获取到一个唯一的服务秘钥(AK)

  • 具体流程

2-2创建应用

2-3获取AK

经过以上三步，就创建好属于自己的一个AK 了

3- helloword (入门指南)

  • 首先，我们看着官方文档操作一下，如何使用？
  • step1 : 在官方网址下，找到开发文档下的JavaScript API

  • 点击进入，找到Hello World
  • 按照下列步骤进行

  • 代码部分

01 引入js

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

02 准备容器

 <style type="text/css">
            html {
                height: 100%;
            }
            body {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            #container {
                height: 100%;
            }
        </style>
    </head>
    <body>
      <!-- 准备容器 -->
        <div id="container"></div>
    </body>

03 初始化地图

 // 初始化地图
  var map = new BMapGL.Map("container")

04 创建一个地图中心点

 // 准备一个中心点（经度和纬度）
 var point = new BMapGL.Point(116.404, 39.915);

05 设置中心点和滚轮缩放

//鼠标滚轮播放
map.enableScrollWheelZoom(true);

  • 运行代码

3- 添加控件（创建地图）

我们给地图添加控件，控件是负责与地图交互的UI元素，百度地图JS API支持比例尺、缩放、定位、城市选择列表、版权，以及自定义控件。

  • 控件介绍

  • 向地图添加控件

使用Map.addControl()方法向地图添加控件。

  • 声明控件并添加到地图中（复制此段代码到案例中）
var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

  • 运行结果

4- 添加点、面、线（覆盖物）

所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。

  • 提供的覆盖物

可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物。

4.1 添加标注点

Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。

API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions（可选）。

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

4-2 添加折线

Polyline表示地图上的折线覆盖物，它包含一组点，并将这些点连接起来形成折线。

var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.910),
		new BMapGL.Point(116.405, 39.920),
		new BMapGL.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

4-3 添加多边形（面）

Polygon表示地图上的多边形覆盖物，它包含一组点。多边形将这组点按顺序首尾相连，最终围成一个封闭图形。

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

4-4 综合使用

  • 01- 点击创建点、线，双击连接在一起（且点消失）
    <script>
        // 初始化地图
        var map = new BMapGL.Map("container");
        // 准备一个中心店（经度和纬度）
        // var point = new BMapGL.Point(116.404, 39.915);
        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);
            // console.log(e);
            //存储点
            line.push(p);
        });
        map.addEventListener("dblclick", (e) => {
            //把第0个点放入到最后面
            line.push(line[0]);
            //创建多边形
            var polyline = new BMapGL.Polyline(line, {
                strokeColor: "blue",
                strokeStyle: "dashed",
                strokeWeight: 2,
                strokeOpacity: 0.5,
                enableEditing: "true",
            });
            //添加线
            map.addOverlay(polyline);
            //清空点的列表
            line = [];
            //
            markers.forEach((item) => {
                map.removeOverlay(item);
            });
            //清空点
            markers = [];
        });
    </script>
  • 02- 运行结果

4-5 绘制圆圈

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


 运行结果如下：

4-6 添加地图的标注

  • 代码
   // 创建标签
            var label = new BMapGL.Label("网红公园", {
                // 创建文本标注
                position: point, // 设置标注的地理位置
                offset: new BMapGL.Size(0, 0), // 设置标注的偏移量
            });
            // 添加标签
            map.addOverlay(label); // 将标注添加到地图中
            // 设置标签的样式
            label.setStyle({
                fontSize: "32px",
                color: "red",
            });

  • 运行结果

5- 信息窗口

所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。

  • 提供的信息窗口

InfoWindow：信息窗口。也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。

  • 添加信息窗口

信息窗口是地图上方浮动显示的HTML内容，可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。

var opts = {
    width: 250,     // 信息窗口宽度
    height: 100,    // 信息窗口高度
    title: "Hello"  // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
  • 扩展代码

        //添加一个点
        var marker = new BMapGL.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        var opts = {
            width: 250, // 信息窗口宽度
            height: 150, // 信息窗口高度
            title: "下楼做核酸了", // 信息窗口标题
        };
        var infoWindow = new BMapGL.InfoWindow(
            `<p>快点的吧，还有再做三天</p><img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wB6C?ver=dddf" width="50%"
            >`,
            opts
        ); // 创建信息窗口对象

        // map.openInfoWindow(infoWindow, point); //打开信息窗口
        //监听事件
        map.addEventListener("click", function (e) {
            map.openInfoWindow(infoWindow, point);
        });
  • 样式实现

6- 搜索

  • 代码
        <style type="text/css">
            html {
                height: 100%;
            }
            body {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            #container {
                height: 90%;
                width: 50%;
            }
        </style>
    </head>
    <body>
        <!-- 准备容器 -->
        <input type="text" onchange="search(this)" />
        <div id="container"></div>
    </body>

<!-- 01导入js -->
<script  type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"></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); // 将标注添加到地图中
        // 百度地图API功能

        var local = new BMapGL.LocalSearch(map, {
            renderOptions: { map: map },
        });
        function search(e) {
            //表单值发生变化时候进行搜索
            local.search(e.value);
        }
    </script>

  • 运行结果

7- vue中使用百度地图

7.1 引入百度地图

在public/index.js 中引入script ，引入百度地图

7.2 新建容器

新建容器，一定要设置宽高

7.3 定义data

在组件中定义data

data() {
return {
map: null,
point: null,
marker: null,
keyword: "",
local: null,
    };
  },

7.4 初始化项目

在 mounted 初始化项目

mounted() {
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.marker = new window.BMapGL.Marker(this.point); // 创建标注
this.map.addOverlay(this.marker); // 将标注添加到地图中
this.local = new window.BMapGL.LocalSearch(this.map, {
renderOptions: { map: this.map },
    });
  },

7.5 监听数据变化

监听数据变化，更新地图

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

7.6 完整代码

  • 在自己的项目里，新建BaiduView.vue ，到router/index.js 配置一下

  • 完整代码（带搜索功能的地图）
<template>
  <div>
    <h1>百度地图</h1>
    <input type="text" v-model.lazy="keyword" />
    <div id="map" ref="map"></div>
  </div>
</template>
<style scoped lang="scss">
#map {
  height: 90vh;
  width: 100%;
}
</style>
<script>
export default {
  data() {
    return {
      map: null,
      point: null,
      marker: null,
      keyword: "",
      local: null,
    };
  },
  mounted() {
    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.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>
  • 运行结果

7.7 可以使用vue地图插件

当然，如果不想在vue里使用百度地图的话，还可以使用vue插件，以下这个是推荐

vue-baidu-map 基于Vue.2 的百度地图组件库

往期传送门

【ECharts】echarts数据化图表入门级教程（附10个案例）

使用方法百度spanclasstokenvue.jsjavascript前端前端框架

有关【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图（超详细）的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  4. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  5. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  6. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  7. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  8. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  9. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  10. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

随机推荐