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

  • 相关阅读:
    java里的分支语句--程序运行流程的分类(顺序结构,分支结构,循环结构)
    Java里的构造函数(构造方法)
    Java里this的作用和用法
    JAVA中的重载和重写
    从键盘接收字符类型的数据并实现剪刀石头布的规则
    使用Notepad++编码编译时报错(已解决?)
    云就是网络,云计算呢
    使用JavaMail创建邮件和发送邮件
    mysql锁机制
    java中几种常用的设计模式
  • 原文地址:https://www.cnblogs.com/haimeimei/p/13228342.html
Copyright © 2011-2022 走看看