在Vue项目中使用百度地图 一时失言乱红尘 2022-04-22 11:00 232阅读 0赞 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzQ2OTcz_size_16_color_FFFFFF_t_70][] 第一步,在public文件夹下的index.html中添加百度地图的script <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=您的密钥></script> 这里**需要尤其注意**,官方默认给你的标签是: <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></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
还没有评论,来说两句吧...