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 = reject
document.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", // 百度的地图密钥AK
myMap: 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 = reject
document.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"); //存放地图容器的id
geoc = 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