1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue 百度地图初始化加载

vue 百度地图初始化加载

时间:2020-02-21 21:45:14

相关推荐

vue 百度地图初始化加载

最近一直在做和百度地图有关的项目,把最近的心路历程和遇到的坑都记录一下,以便后期

继续和百度地图磕在一起。

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",});},}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。