vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息

1. 解决提示：解决调用百度地图API弹出提示 “百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥”的方法

百度官网生成ak: https://lbsyun.baidu.com/
登录点击-控制台-应用管理-我的应用，查看AK,可以修改设置里面的启用服务，看个人需求

2. 拾取坐标：https://api.map.baidu.com/lbsapi/getpoint/index.html，老地址下滑找到坐标拾取器，进入搜索位置名称就可以获取你想要位置的坐标

一方法，vue引入百度地图BMapGL

1.在src目录下新建一个js文件bmpgl.js，文件名字和位置都可以随便取，随便放

export function BMPGL(ak) {return new Promise(function(resolve, reject) {window.init = function() {resolve(BMapGL)}const script = document.createElement('script')script.type = 'text/javascript'script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`script.onerror = rejectdocument.head.appendChild(script)})
}

2.vue页面里面引入

import { BMPGL } from "@/bmpgl.js"

<template><div class="home"><!--创建地图容器--><div id="containerMap" class="allmap"></div></div>
</template><script>
import { BMPGL } from "@/bmpgl.js"
export default {name: "home",data() {return {ak: "XXXXXXXXX", // 百度的地图密钥AKmyMap: null};},mounted() {this.initMap()},methods: {/**传入密钥获取地图回调* 创建地图实例,点坐标* axios => res 获取的初始化定位坐标* 初始化地图，设置中心点坐标和地图级别* 开启鼠标滚轮缩放*/initMap() {BMPGL(this.ak).then((BMapGL) => {let map = new BMapGL.Map("containerMap");let point = new BMapGL.Point(112.89131, 28.234149)map.centerAndZoom(point, 19)map.enableScrollWheelZoom(true)map.setHeading(64.5)map.setTilt(73)}).catch((err) => {console.log(err)})},}
};
</script>
<style lang="scss" scoped>
.allmap{width: 100%;height: 300px;position: relative;z-index: 1;
}
</style>

二方法，获取天地图根据名称显示坐标定位信息

1.安装相关依赖

 npm i --save vue-baidu-map

2.在main.js中引用，

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

3.创建文件 bmpgl.js，名字随便取，位置随便放

export function BMPGL() {return new Promise(function(resolve, reject) {window.init = function() {resolve(BMap)}const script = document.createElement('script')script.type = 'text/javascript'script.src = "http://api.map.baidu.com/api?v=2.0&ak="+"你的密钥"+"&callback=init";script.onerror = rejectdocument.head.appendChild(script)})
}

4.创建容器，指定的宽和高
5.引入js文件，定义需要用到的数据，定义全局的map地图对象和geocoder地理编码对象
6.在mounted中绘制地图
7.在methods中创建一个定位地点的方法，添加要展示的地点的名称，此处也可动态指定

<template><div><div class="map"><div id="containerMap" style="height: 300px; width: 100%" ref="allmap"></div></div></div>
</template><script>
import { BMPGL } from "@/bmpgl.js"var map;
let geoc = null;
export default {name: "home",data() {return {ak: "你的密钥", // 百度的地图密钥dialogMap: false,mapPointName: "",mapGetshow: true};},created() { },mounted() {this.$nextTick(function () {var _this = this;BMPGL(_this.ak).then((BMap) => {let that = this;this.dialogMap = !this.dialogMap;if (that.mapGetshow) {map = new BMap.Map("containerMap");    //存放地图容器的idgeoc = new BMap.Geocoder();map.enableScrollWheelZoom();}_this.mapNameChange()    //调用定位地点的方法});});},methods: {mapNameChange() {let that = this,point,marker = null;let local = new BMap.LocalSearch(map, {renderOptions: { map: map },onSearchComplete: (res) => {if (local.getResults() != undefined) {map.clearOverlays(); //清除地图上所有覆盖物if (local.getResults().getPoi(0)) {point = local.getResults().getPoi(0).point;                             //获取第一个智能搜索的结果map.centerAndZoom(point, 10);marker = new BMap.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中marker.enableDragging(); // 可拖拽geoc.getLocation(point, function (rs) {var addComp = rs.addressComponents;that.mapPointName =addComp.province +", " +addComp.city +", " +addComp.district +", " +addComp.street +", " +addComp.streetNumber;});} else {console.log("未搜索到结果")}} else {alert("未搜索到结果");}},});local.search("中电二期"); //要展示的地点},},
}
</script><style lang='less' scoped></style>

如果想学全栈开发，从写接口到，前端实现调接口，一整套流程，可以进群获取视频资料学习！

Java全栈交流①群要是满了可以加2群 1135453115， ②群 821596752

vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息相关推荐

html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
解决Vue引入百度地图JSSDK：BMap is undefined 问题
原文链接:解决Vue引入百度地图JSSDK:BMap is undefined 问题百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入异步加载但vue项目中仅某一两个 ...
vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
1.初始化echarts以及例子可以看管网的地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...
如何引入百度地图和获取精准获取经纬度坐标
引入百度地图百度地图官网开发手册百度地图官网注册用户 -> 控制台 -> 认证用户 -> 创建项目 -> 获取ak密钥 -> 替换js中ak秘钥 < ...
vue引入百度地图使用地图的JavaScript API GL 实现在地图上标注点位
本文章针对于不会看文档的小白.刚毕业参加工作的前端朋友们. 1.首先要引入百度地图具体流程上个文章有. 2.根据官网的demo引入 (官网的不太详细,可以根据自己需求引入)我这里就展示一部分代码. ...
vue引入百度地图报错 BMap未定义 error ‘BMap‘ is not defined
vue项目引入百度地图报错 BMap未定义; 在经过了多次的测试后,修改webpack等配置文件后,发现了一个十分便捷的处理方法: 首先是在地图加载的方法中打印了window,发现BMap是挂载在w ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
vue引入百度地图实现轨迹绘制
引入 cnpm i --save vue-baidu-map main.js import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: 'U ...
Vue引入百度地图，如何去掉左下角的版权logo百度等信息？
参考解决Vue用v-html.v-text渲染后台富文本框文本内容样式修改问题,用自定义css样式无法渲染出对应效果的问题_你挚爱的强哥❤给你发来1条消息❤-CSDN博客原理 /*#SGbaiduma ...

vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息

一方法，vue引入百度地图BMapGL

二方法，获取天地图根据名称显示坐标定位信息

vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息相关推荐

最新文章

热门文章