vue中调用百度地图api

最近呢，由于工作需要，自己搭一个简单的h5应用给公司的客户，方便预约来访时间，然后写了小半年react-native的我，终于能写web了…（题外话题外话），然后我就欣然拿起久未使用的vue（好吧，还是用了半天时间复习复习的，毕竟忘得比较快），回归正题，有这么一个需求，需要用到地图功能，然后呢按要求接入了百度地图，下面就简单的说说简单的应用，给自己留个笔记，不然再忘了还要去百度别人的…

1.首先你要成为百度开发者

具体的步骤官方说的蛮详细的，去官网看一下好啦，就是注册申请然后创建个应用拿到ak就好了-------（百度开放平台）

2.不管你是要自己在页面上画地图进行操作还是直接调起百度地图web，都要先在vue项目中先引入

首先下载 vue-baidu-map

npm install vue-baidu-map

然后在main.js中加上

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: '你的密钥'
})

好啦，引入完成！

3.接下来根据需要，如果需要在自己的页面中画地图，就用刚刚引入的相关组件（放一个小例子）

<template><div><baidu-map class='map' :center='map.center' :zoom="map.zoom" @ready="handler"><!--缩放--><bm-navigation anchor='BMAP_ANCHOR_TOP_LEFT'></bm-navigation><!--定位--><bm-geolocation anchor='BMAP_ANCHOR_BOTTOM_RIGHT' :showAddressBar="true" :autoLocation="true"></bm-geolocation><!--点--><bm-marker :position="map.center" :dragging="map.dragging" animation='BMAP_ANIMATION_DROP'><!--提示信息--><bm-info-window :show="map.show">Hello~</bm-info-window></bm-marker></baidu-map></div>
</template><script>export default {name: 'demo',data: () => ({map:{center: {lng: 121.4472540000, lat: 31.3236200000},zoom: 15,show: true,dragging: true},}),methods: {handler ({BMap, map}) {let me = this;console.log(BMap, map)// 鼠标缩放map.enableScrollWheelZoom(true);// 点击事件获取经纬度map.addEventListener('click', function (e) {console.log(e.point.lng, e.point.lat)})}}}
</script><style scoped>.map {width: 100%;height: 400px;}
</style>

4.如果想要直接调起百度地图页面

window.location.href = `http://api.map.baidu.com/marker?location=${经度,维度}&title=${地址}&content=${详细地址}&output=html&src=webapp.baidu.openAPIdemo`
// 注意，这里有一个很讨厌的点，就是经纬度，如果你用百度地图拾取坐标，拿到经纬度，例如（116.435314,39.910729）之后应用在上面的时候，location应该是（location=39.910729,116.435314），不然你就会发现你的地图一片蓝...真的很坑

ok，到此为止，也不是什么高深的东西，就是记个笔记啦~

vue中调用百度地图api相关推荐

vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
vue中调用百度地图实现搜索等功能
vue中调用百度地图实现搜索等功能在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫现在也是体会到了,学新的东西还是得看官方文档 ...
在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示
文章目录 1.在vue中引入百度地图的script 2.生成想要的地图样式 3.生成地图 4.创建3d棱柱 5.设置标记点和提示框 6.代码总结 1.在vue中引入百度地图的script 在publi ...
如何在网页中调用百度地图API
转载地址:http://www.cnblogs.com/milkmap/archive/2011/02/22/1960004.html [百度地图API]建立全国银行位置查询系统(一)--如何创建地图 ...
nuxt项目中调用百度地图api
1:配置代理 2:封装接口 // 该项目涉及到多个跨域,这里将请求前缀注释, //在api下的map.js文件中封装接口export default ({$axios},inject) => { ...
vue项目调用百度地图api 学习总结
一.安装百度地图插件: npm install vue-baidu-map –save 二.在vue项目首页index.html进入插件: 注:src里的http必须要写如果不写会出现bug! ! ! ...
【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
android 调用百度地图规划,Android 调用百度地图API
一.到百度地图开发平台下载SDK 1.点击自定义下载 2.下载自己想要的功能包我这里选了三个 3.获取密钥获取密钥之前我们要新建一个应用填写好相关的信息二. 新建一个项目工程 1. 把下载好的 ...
vue调用百度地图API实现点击相应位置切换地图定位
vue调用百度地图API实现点击相应位置切换地图定位 1.需求分析在页面显示地图,初始状态显示上海市,地图上有特定地点的标注. 左侧为建筑(地点)列表,点击某个地点右侧地图定位到其地理位置并显示具体 ...

vue中调用百度地图api

1.首先你要成为百度开发者

2.不管你是要自己在页面上画地图进行操作还是直接调起百度地图web，都要先在vue项目中先引入

3.接下来根据需要，如果需要在自己的页面中画地图，就用刚刚引入的相关组件（放一个小例子）

4.如果想要直接调起百度地图页面

vue中调用百度地图api相关推荐

最新文章

热门文章