素材巴巴 > 程序开发 >

js和vue如何调用百度地图

程序开发 2023-09-14 11:13:21

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

以百度地图为例:

1:首先打开百度地图开放平台网站百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)icon-default.png?t=M276https://lbsyun.baidu.com/

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

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

 页面效果如下

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

 

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

页面效果如下

 

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

 

 

 

 页面效果

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

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

 

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

 启动项目,看下效果

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

 


标签:

上一篇: HTML中img标签及相关属性 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。