【vue+百度地图】vue项目使用百度地图API（普通展示）

方法来自大神【超华】

1、进入百度API

操作官网：https://lbsyun.baidu.com

根据官网流程：

登录自己的百度账号->
申请然后点击邮箱内获取的新链接->
填写自己需要的信息（Referer白名单没有可以填：*）->
拥有自己的应用（保存好绿色圈圈的密钥）

2、引入地图

替换public文件夹下的index.html
ak换成刚刚保存的密钥

<script src="//api.map.baidu.com/api?v=2.0&ak=我们申请下来的ak" type="text/javascript"></script>

3、页面添加地图容器

// 必须有一层是规划好宽高的
<div style="width: 570px; height: 400px; padding-left: 30px;"><div  style="width: 100%; height: 100%" id="map" class="map"></div>
</div>

4、加载地图

mounted(){// 创建Map实例var map = new BMap.Map("map"); // 初始化地图,设置中心点坐标和地图级别map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 20); // map.centerAndZoom：第一个参数可以是根据之前创建好的一个点为中心，创建出地图，也可以根据城市地区的中文名称创建地图。第二个参数是地图缩放级别，最大为19，最小为0map.addControl(//添加地图类型控件new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],}));map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true);
},

还有显示卫星的模式

       // GL版命名空间为BMapGLvar map = new BMapGL.Map("map");    // 创建Map实例map.centerAndZoom(new BMapGL.Point(111.68059726328418,40.82603915587445), 18);  // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式// 事件map.addEventListener('click', function (e) {alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);});},

现在应该有地图出现在你的页面上啦！

附我所有用到的资料网址：百度地图API SDK

【vue+百度地图】vue项目使用百度地图API（普通展示）相关推荐

vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例
一.最终效果 1.全量定位 2.获取当前位置定位 3.标点后回显选点的地址 4.点击导航,打开弹窗选择高德地图,会进入第三方app中显示路线 5.地图已经封装成一个组件(AMapComponents) ...
百度人脸java项目_百度人脸识别java 示例源码
[实例简介]三行代码助你跑通百度人脸对比 [实例截图] [核心代码] /** * @author wl * @date 2019/12/6. */ import config.Base64Util; ...
react 逆地理高德地图_react中使用高德地图的原生API
干货,无话 1.react-create-app,创建新react项目: 2.npm install react-amap,引入高德地图的封装: 3.编写组件index.js: import Reac ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
vue项目调用百度地图api 学习总结
一.安装百度地图插件: npm install vue-baidu-map –save 二.在vue项目首页index.html进入插件: 注:src里的http必须要写如果不写会出现bug! ! ! ...
Vue项目引用百度地图并实现搜索定位等功能
Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路 ...
vue项目调用百度地图 BMap is not defined
这次老板新接了一个四点半官网页面,使用vue来写.emm--我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...
vue 项目中百度地图 API 使用流程
文章目录一.在百度地图开放平台注册账号并登录.认证二.创建 ak 三.项目使用四.丰富的功能一.在百度地图开放平台注册账号并登录.认证 1.网址:http://lbsyun.baidu.com ...
vue 圆形水波_vue项目百度地图+echarts的涟漪水波效果
先看效果 image.png id="allmap" class="map" ref="map" > import echarts f ...

【vue+百度地图】vue项目使用百度地图API（普通展示）

1、进入百度API

2、引入地图

3、页面添加地图容器

4、加载地图

【vue+百度地图】vue项目使用百度地图API（普通展示）相关推荐

最新文章

热门文章