如何在vue项目中使用百度地图 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关如何在vue项目中使用百度地图、文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

<强> 1.指数。html中引入

& lt; script 类型=拔谋?javascript", https://www.yisu.com/zixun/src=" http://api.map.baidu.com/api?v=2.0&ak=您的密钥">

2。新建个组件地图

注意:不要把组件命名为地图,因为html中有地图标签,会报错

报错:不要使用内置的或保留html元素为组件id: map

3。然后就可以直接再组件了写相关代码了

安装(){ 　　,,var map =, new BMap.Map(& # 39;地图# 39;) 　　,,var point =, new BMap.Point (108.840053, 34.129522) 　　,,map.centerAndZoom(点,,14) 　　,,//? 　　以前,,}

另一个方法:

<强> 1。新建一个地图。js

export function 议员(ak), { 　　,return new 承诺(function (解决,,拒绝),{ 　　时间=window.onload 才能;function (), { 　　,才能解决(BMap) 　　,,} 　　var 才能;script =, document.createElement (“script"); 　　script.type =,才能“文本/javascript"; 　　script.src =,才能“http://api.map.baidu.com/api?v=2.0& ak=? ak +“,回调=init"; 　　时间=script.onerror 才能;拒绝; 　　document.head.appendChild才能(脚本); 　　,}) 　　}

<强> 2。在需要用到的地图的vue页面中引入

import {议员},得到& # 39;。/map.js& # 39;

<强> 3。在vue页面中调用

数据:{ 　　返回{才能　　,,,正义与发展党:& # 39;1287348913029483740293 & # 39;//密钥　　,,} 　　}，　　安装(){ 　　美元。才能nextTick(函数(){ 　　,,var _this =,; 　　,,议员(_this.ak),然后(BMap =祝辞,{ 　　,,,//在此调用api 　　,,}) 　　,,} 　　} vue是什么

vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。

关于如何在vue项目中使用百度地图就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。