js和vue如何调用百度地图

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

以百度地图为例:

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

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

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

js和vue如何调用百度地图_第1张图片

 页面效果如下

js和vue如何调用百度地图_第2张图片

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

js和vue如何调用百度地图_第3张图片

 js和vue如何调用百度地图_第4张图片

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

页面效果如下

 

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

js和vue如何调用百度地图_第5张图片

 js和vue如何调用百度地图_第6张图片

 

 js和vue如何调用百度地图_第7张图片

 页面效果

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

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

 js和vue如何调用百度地图_第8张图片

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

js和vue如何调用百度地图_第9张图片 启动项目,看下效果

js和vue如何调用百度地图_第10张图片

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

 

你可能感兴趣的:(前端,javascript)