最近一直在做和百度地图有关的项目,把最近的心路历程和遇到的坑都记录一下,以便后期
继续和百度地图磕在一起。
1:账号注册
进入百度地图开放平台官网,有账号的登录,没有账号的请注册。
2:AK秘钥申请
JavaScript API只支持浏览端的AK进行接入与访问,请开发者在申请AK时注意选择正确的AK类型。
进入百度地图开放平台官网控制台,点击【应用管理】-【我的应用】点击【创建应用】进入AK申请页面,填写应用名称,务必选择AK类型为“浏览器端”,JS API只支持浏览器端AK进行请求与访问
3:在index.html页面中使用script标签,引入api地址即可,如下:
<script type="text/javascript" src="//api./api?type=webgl&v=1.0&ak=你的密钥"></script>
4:创建一个index.vue 页面对地图进行加载:
<template><divid="container"style="width: 100%; height: 888px; position: absolute"></div></template><script>export default {data() {return {//地图map: "",}}}</<script><style lang="scss" scoped></style>
5:初始化加载地图信息:
mounted() {this.initMap();},methods: {// 初始化加载地图initMap() {let _this = this;_this.map = new BMapGL.Map("container");var point = new BMapGL.Point(121.245049, 28.80429); //中心点位_this.map.centerAndZoom(point, 22);_this.map.setViewport(point);_this.map.disableDragging(false); //禁止拖动地图_this.map.disableDoubleClickZoom(false); //禁止鼠标双击放大_this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放_this.map.setDisplayOptions({poiText: false, // 隐藏poi标注poiIcon: false, // 隐藏poi图标building: false, // 隐藏楼块});//自定义地图背景图_this.map.setMapStyleV2({styleId: "nidezidingyiditubeijingtuyangshiid",});},}