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

  • 相关阅读:
    小贝_mysql 存储过程
    Codeforces Round #253 (Div. 1)-A,B
    rac环境改动spfile后遭遇ora-29250小例
    Linux学习笔记——例说makefile 索引博文
    《信息检索》课程论文撰写指南 及 分享加分说明
    git mirror的创建与使用
    一起talk GDB吧(第二回:GDB单步调试)
    nginx源代码分析--配置信息的继承&amp;合并
    EasyUI基础入门之Droppable(可投掷)
    自己动手写CPU之第七阶段(5)——流水线暂停机制的设计与实现
  • 原文地址:https://www.cnblogs.com/haimeimei/p/13228342.html
Copyright © 2011-2022 走看看