vue使用百度地图

vue使用百度地图1.安装：npm install vue-baidu-map --save2.全局注册使用有3种2.1在main.js注册使用在main.js全局注册import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: 'xPNLWkqdUGRQNqT2ze1Hh6bGVoj0GTuk'})2.1.1在vue页面使用：<t

闲人不梦卿

2616人浏览 · 2021-05-20 17:16:31

闲人不梦卿 · 2021-05-20 17:16:31 发布

vue使用百度地图

1.安装：npm install vue-baidu-map --save

2.注册使用有3种方式

2.1在main.js全局注册使用

在main.js全局注册

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
    ak: 'xPNLWkqdUGRQNqT2ze1Hh6bGVoj0GTuk'
})

2.1.1在vue页面使用：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <baidu-map @ready="mapHandle" style="width:100%;height:400px" :scroll-wheel-zoom='true' ></baidu-map>
  </div>
</template>
<script>
   export default {
  
  methods:{
            mapHandle({ BMap, map }) {
            var point = new BMap.Point(115.95845796638,28.696117043877);
            map.centerAndZoom(point, 13)
            var icon = new BMap.Icon(require("../assets/logo.png"),new BMap.Size(74,84));
            var marker = new BMap.Marker(point,{icon:icon}) // 创建标注
            map.addOverlay(marker) // 将标注添加到地图中
             var html = [];
              var opts ={
               width :250,
               height:30,
             }
            html.push('<div class="mapTipWindow"> <ul>');
            html.push("<li>"+ this.map.address +"</li>");
            html.push("</ul></div>");
            var infowindow = new BMap.InfoWindow(html.join(""),opts);
            marker.addEventListener("click",function(){
                this.openInfoWindow(infowindow);
            });
          }
     }
  
   }
</script>

2.2在vue项目下pulic下的index.html全局注册使用

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=xPNLWkqdUGRQNqT2ze1Hh6bGVoj0GTuk"></script>
</head>

<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

2.2.1在vue页面使用

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
 <div id="map_canvas" style="width: 600px; height: 500px"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  mounted()
  {
     this.mapHandle();
  },
  methods: {
    mapHandle()
    {
        var map = new BMap.Map('map_canvas');
        var poi = new BMap.Point(116.307852, 40.057031);
        map.centerAndZoom(poi, 16);
    }
  }
}
</script>

2.3在vue页面局部注册使用

原理就是在页面创建时动态将获取百度地图api的js写入body，写入成功后，回调一个函数，该函数通过BMap对象生成一个百度地图控件
loadResources.js：

export function loadBMap(funcName) {
    var script = document.createElement("script");
    script.src = "http://api.map.baidu.com/api?v=2.0&ak=xPNLWkqdUGRQNqT2ze1Hh6bGVoj0GTuk&callback=" + funcName;
    document.body.appendChild(script);
}

2.3.1在vue页面使用

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="map_canvas" style="width: 600px; height: 500px"></div>
  </div>
</template>


<script>
   // 根据你文件的真实路径引入
  import { loadBMap } from "../../public/loadResources";
   export default {
     created()
     {
           window.initBaiduMapScript = () => {
            this.mapHandle();
          };
            loadBMap("initBaiduMapScript");
     },
   mounted()
  {
   
  },
  methods:{
       mapHandle()
    {
        var map = new BMap.Map('map_canvas');
        var poi = new BMap.Point(116.307852, 40.057031);
        map.centerAndZoom(poi, 16);
      
    }
  }
   }
</script>
<style scoped>
    
</style>

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^