js和vue如何调用百度地图

在日常生活中，地图的应用很广泛，那么作为前端小白，怎么样才能调用地图模块呢？

以百度地图为例：

1：首先打开百度地图开放平台网站百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)https://lbsyun.baidu.com/

2：注册一个个人开发者账号。创建好后点击控制台，找到应用管理--我的应用，新建一个应用

3：新建一个html，在页面中先导入百度地图，具体步骤如下图

 页面效果如下

 那怎么给地图的某个地点做一个标记呢？

 

上述代码可以实现在地图上单击创建一个标记，再单击会取消上一个标记在这次点击的左边位置新建一个标记，双击会把之前单价创建的标记创建一个面

页面效果如下

 

接下来我们要实现搜索功能，在文本框里输入文字，然后地图把输入的东西检索并在地图上标记出来，这个功能需要jQuery.js的Ajax请求，因为要请求百度地图的检索功能api

 

 

 

 页面效果

 那么如何在vue项目中调用呢？

只需要在public目录下的index.html中引入百度地图接口

 

然后就可以在页面中使用啦！

 启动项目，看下效果

以上就是 调用百度地图的步骤了，如有疑问可在下面评论必会答疑解惑