vue百度地图

Posted yd-mm

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue百度地图相关的知识，希望对你有一定的参考价值。

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

打开   百度地图开放平台 | 百度地图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>

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











以上是关于vue百度地图的主要内容，如果未能解决你的问题，请参考以下文章

vue中引入百度地图

Vue 实现百度地图(基础)

vue 使用百度地图(vue-Baidu-Map)

Vue+Antd搭配百度地图实现搜索定位等功能

vue 使用百度地图:搜索定点

Vue中如何使用百度地图