vue、百度地图

点击页面中的位置，跳转到百度地图，并且根据经纬度定位到具体位置

页面中在位置的地方添加一个点击事件

<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>

<title>北京xxxx有限公司</title>

</head>

<body>

</body>

</html>

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>

这也是第一次做地图之类的页面，简单实现下，以后再做改善

猜你喜欢