最近呢，由于工作需要，自己搭一个简单的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./marker?location=${经度,维度}&title=${地址}&content=${详细地址}&output=html&src=webapp.baidu.openAPIdemo`// 注意，这里有一个很讨厌的点，就是经纬度，如果你用百度地图拾取坐标，拿到经纬度，例如（116.435314,39.910729）之后应用在上面的时候，location应该是（location=39.910729,116.435314），不然你就会发现你的地图一片蓝...真的很坑
ok，到此为止，也不是什么高深的东西，就是记个笔记啦~
