点击页面中的位置，跳转到百度地图，并且根据经纬度定位到具体位置
打开 百度地图开放平台 | 百度地图API SDK | 地图开发 获取 密钥ak
页面中在位置的地方添加一个点击事件
<div class="lxdz_nr" @click = "baidu(116.442208,39.922129)"> //具体的经纬度，可以直接写在这里，也可以写给地址的位置
<p>xx公司</p>
<p>北京市xxxxxx</p> <p>400-665-0265</p></div>
<div class="lxdz_nr" @click = "baidu(116.442208,39.922129)"> //具体的经纬度
<p>xx公司</p>
<p>北京市xxxxxx</p> <p>400-665-0265</p></div>
<script>
export default {
methods: {
baidu (lng, lat) {
sessionStorage.setItem(‘bddt‘, 1)
this.$router.push({path: ‘/Lxdt‘, query: {lng: lng, lat: lat}}) //path下指的是需要到的另外一个Lxdt页面,传两个值lng，lat
}
}
}
}
</script>
以上是放位置的页面，跳转到百度地图，需要再新建一个页面 （就是上面写的path：/Lxdt）
<template>
<div class="dt">
<div id="bddt">
</div>
</div>
</template>
<script>
export default {
name: ‘lxdt‘,
mounted () {
if (sessionStorage.getItem(‘bddt‘) - 0 === 1) {
sessionStorage.setItem(‘bddt‘, 0)
setTimeout(_ => {
window.history.go(0)
}, 0)
}
}
}
</script>
<style scoped>
.dt{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#bddt{
height:100%
}
</style>
本来想直接在vue页面中显示出来或者写成组件，但是看百度api和看一些文档，写在里面也是各种报错，只好把代码写在html里，代码如下：
先在html里引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=百度获取的密钥"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=百度获取的密钥"></script>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="./static/img/bitbug_favicon.ico" type="image/x-icon" />
<title>北京xxxx有限公司</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<script>
function getUrlData() {
var url = location.hash
var arr = []
var obj = {}
if (url.indexOf(‘?‘) === -1) {
return
} else {
url = url.split(‘?‘)[1]
arr = url.split(‘&‘)
arr.forEach(function (k) {
obj[k.split(‘=‘)[0]] = k.split(‘=‘)[1]
})
}
return obj
}
var XY = {
lng: getUrlData().lng,
lat: getUrlData().lat
}
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "Hello" // 信息窗口标题
}
var map = new BMap.Map("bddt"); // 创建地图实例
var point = new BMap.Point(XY.lng, XY.lat); // 创建点坐标
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(); // 开启滚轮缩放
var marker = new BMap.Marker(point); //创建一个标志物圆点
map.addOverlay(marker); //以上如果还有需要的内容都可以在百度地图文档里添加
</script>
这也是第一次做地图之类的页面，简单实现下，以后再做改善
原文地址：https://www.cnblogs.com/yd-MM/p/10031806.html