zoukankan      html  css  js  c++  java
  • Vue 框架中添加百度地图组件

    1、在html文件中引入百度地图,

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fQRe6ynMMsc17qmOMKvNRol0bVDh32WZ" ></script>

    v=2.0&ak=“地图秘钥”//百度地图申请秘钥

    2、在webpack.base.conf.js文件内添加external选项,放在module.exports内部,和entry平级;

    externals: {

      "BMap": "BMap"

    },

    3、添加地图组件BMapComponent.vue,这里主要注意两点:

    a.使用BMap的时候不需要import了,import反而会报错  

    b.注意一定要给BMap的div设置高度,否则地图会看不见

    地图组件的代码如下:

    <template>

      <div id="allmap" v-bind:style="mapStyle"></div>

    </template>

    export default {

      props: {

        //地图高度

        mapHeight:{

          type: Number,

          default: 400

        },

        //经度

        longitude:{

          type: Number,

          default: 121.360

        },

        //纬度

        latitude:{

          type: Number,

          default: 31.225

        },

        //描述

        description:{

          type: String,

          default:'上海市长宁区天山西路1068号联强国际广场D幢4层'

        }

      },

      data() {

        return {

          mapStyle:{

            '100%',

            height:this.mapHeight +'px'

          },

        };

      },

      mounted() {

        var map = new BMap.Map('allmap');

        var point = new BMap.Point(this.longitude, this.latitude);

        map.centerAndZoom(point, 15);

        map.addControl(new BMap.MapTypeControl());

        map.enableScrollWheelZoom(true);

        map.enableDoubleClickZoom(true);

        var marker = new BMap.Marker(point);

        map.addOverlay(marker);

        var opts ={

          250,

          height: 75,

          title: '上海達豐机械租赁有限公司',

        }

        var infoWindow = new BMap.InfoWindow(this.description, opts);//创建信息窗口对象

        marker.addEventListener("click", function(){

          map.openInfoWindow(infoWindow, point);

        });

        map.openInfoWindow(infoWindow, point);//开启信息窗口

      }

    }

    </script>

    4、在父组件中使用:

    a.  import map from '../../components/map/map.vue';

    b.  在template中增加标签

    <el-map :mapHeight="mapHeight" :longitude="longitude" :latitude="latitude" :description="description"></el-map>

    export default{
      data(){
        return{
          height:300,
          longitude: 121.360,
          latitude: 31.2256,
        }
      },
      componets:{
        'el-map': map
      },
    }

  • 相关阅读:
    使用SetTimer函数为Delphi的Win控件设置时钟
    关于QT版本的安装配置的一些困惑
    Linux设备驱动开发详解-Note(11)--- Linux 文件系统与设备文件系统(3)
    邪恶的C++
    TControl的主要功能研究(属性,函数,事件)
    Delphi研究,对全局变量函数与OOP编程关系的一点体会 good
    QT 相关资源(书籍、论坛、博客等。。。)整理
    VC UI界面库大集合
    .net程序员求职简历
    C++著名程序库的比较
  • 原文地址:https://www.cnblogs.com/haimeimei/p/13228342.html
Copyright © 2011-2022 走看看