在Vue项目中使用百度地图

一时失言乱红尘 2022-04-22 11:00 281阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzQ2OTcz_size_16_color_FFFFFF_t_70][]

第一步，在public文件夹下的index.html中添加百度地图的script

这里**需要尤其注意**，官方默认给你的标签是：

但是这种连接方法会导致浏览器报以下警告信息：

> A parser-blocking, cross site (i.e. different ![20181104161702543.png][]eTLD+1) script, https://api.map.baidu.com/getscript?v=3.0&ak=密钥密钥密钥密钥&services=&t=20181029164750, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

在srcipt标签中改用getcript方式可以解决这个问题

然后再vue中新建一个map.vue文件，代码如下：

<template>
      <div id="allmap" ref="allmap"></div>
    </template>
    
    <script>
    
    export default {
      name: 'Map',
      mounted() {
          this.ready();
      },
      methods: {
        ready: function() {
          var map = new BMap.Map("allmap");    
          var point = new BMap.Point(116.404, 39.915);    
          map.centerAndZoom(point, 15);    
          window.setTimeout(function(){  
              map.panTo(new BMap.Point(116.409, 39.918));
          }, 2000);
        }
      }
    };
    
    </script>
    
    <style>
    #allmap{
      height: 300px;
      width: 500px;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzQ2OTcz_size_16_color_FFFFFF_t_70]: /images/20220422/9bdfbca9eb0644469629038bb6d561a2.png
[20181104161702543.png]: /images/20220422/c3aef000334d40588042e45b65305873.png