常用命令,vue项目中选用百度地图的主意

By admin in 4858美高梅 on 2019年3月29日

1.在百度地图申请密钥: 将

1.在百度地图申请密钥:  将

 使用了 vue 的下令后,表明式是 JS 表明式,变量是 VUE 实例中的数据属性。

介绍

一个挑选日期的vue组件
基于vue2.0
修改了前头版本重视vuex,未来比较插件化 帮忙npm,更方便使用 。
想协调做vue插件的爱人也得以看下里面包车型大巴兑现的代码
github地址
https://github.com/jamielhf/vue/tree/master/calendar
自家的博客地址
http://jamielhf.cn

<script type=”text/javascript”
src=”” ></script>
中的密钥替换到你申请的,在vue项目标index.html引用。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script>
中的 密钥替换来你申请的,在 vue项目标index.html引用。

1 常用命令

demo展现&&项目中的使用

<img width = “384”
src=”;
<img width = “300”
src=”;

  1. 在build 文件下下的 webpack.base.conf.js贴入代码

    externals: {

     "BMap": "BMap"
    

    },

  1. 在build 文件下下的 webpack.base.conf.js贴入代码
  • v-if指令
  • v-show指令
  • v-else指令
  • v-for指令
  • v-bind指令
  • v-model
  • v-on指令
  • v-text指令

目录结构

demo 用vue-cli 的webpack-simple构建的

calendar
 |--dist build生成的目录
 |--doc   展示图片
 |--src
   |--assets 资源
   |--components
     |--calendar    日期组件
     |--dateScroll  滚动的子组件
   |--css
   |App.vue   入口
   |main.js   

4858美高梅 1

externals: {
  "BMap": "BMap"
 },

1.1 v-if是条件渲染指令,它依照表明式的真伪来删除和插入元素,它的主干语法如下:

零件使用

常用命令,vue项目中选用百度地图的主意。安装

npm i vue2-datepick --save

初始化

import Calendar from 'vue2-datepick';
Vue.use(Calendar);

使用

   <template>
     <div id="app">
       <p @click = "setDate" >点击设置日期(默认今天)</p>
       <p @click = "setDate2" >设定指定的日期(20150220)</p>

     <p>{{data}}</p>
     </div>
   </template>

   <script>


   export default {
     name: 'app',
     data () {
       return {
           data:'日期'
       }
     },

     methods:{

      setDate(){
          let vm = this;
         this.$calendar.show({
             onOk(data){
                 console.log(data)
                 vm.data= data.year+'-'+data.month+'-'+data.day;
                 console.log('确定')
             },
             onCancel(){
                 console.log('取消')
             }
         })
       },
         setDate2(){
             let vm = this;
             this.$calendar.show({
                 onOk(data){
                     vm.data= data.year+'-'+data.month+'-'+data.day;
                     console.log('确定')
                 },
                 onCancel(){
                     console.log('取消')
                 },
               year:2015,
               month:2,
               day:20,
             })
         }
     },
   }
   </script>

默许的年份是 1903 – 2050 假诺急需能够在调用的时候传出参数

  this.$calendar.show({
         startYear:2000,
        endYear:2010,
     })
  1. map.vue代码(demo能够一贯行使,demo使用了vue-clipboard2插件,请自行设置)


4858美高梅 2

v-if="expression"

版本

1.0.4 更改初阶化的代码

  希望对我们有帮衬!

  1. map.vue代码(demo能够一向利用,demo使用了vue-clipboard2插件,请自行安装)

expression是1个回去bool值的表明式,表明式能够是3个bool属性,也得以是三个回到bool的运算式。例如:

 

<template>
  <div>
    <el-row >
     <el-col :offset="2" :span="8">
       <el-input :id="suggestId" v-model="address_detail" :clearable='clearable' placeholder="请输入店铺地址,获取店铺坐标" >
      </el-input>
    </el-col>
    <el-col :span="2">
      <el-button id="position" @click="search" type="primary">定位</el-button>
    </el-col>
    <el-col :span="12" >
     <el-tag type="success" v-clipboard:copy="userlocation.lng" v-clipboard:success="onCopy" v-clipboard:error="onError" >经度 {{userlocation.lng}}</el-tag>
     <el-tag type="success" v-clipboard:copy="userlocation.lat" v-clipboard:success="onCopy" v-clipboard:error="onError">纬度 {{userlocation.lat}}</el-tag>
     <el-tag type="success" ><<<<点击左侧按钮复制经纬度信息</el-tag>
    </el-col> 
  </el-row>
  <el-row>
    <el-col :offset="2" :span="18">
      <div id="map_canvas" class="allmap"></div>
    </el-col>
  </el-row>
  </div>
</template>
<script>
export default {
 data() {
  return {
   address_detail: "", //详细地址
   userlocation: { lng: "", lat: "" },
   clearable: true,
   suggestId: "suggestId",
   map : {},
   mk: {}
  };
 },
 created () {

 },
 methods: {
   drawMap() {
    this.map = new BMap.Map("map_canvas");        // 创建地图实例
    this.map.addControl(new BMap.NavigationControl());      // 启用放大缩小 尺
    this.map.enableScrollWheelZoom();
    this.getlocation();//获取当前坐标, 测试时获取定位不准。

    var point = new BMap.Point(this.userlocation.lng, this.userlocation.lat); // 创建点坐标 
    this.map.centerAndZoom(point, 13);         // 初始化地图,设置中心点坐标和地图级别 
    var marker = new BMap.Marker(point);    // 创建标注  
    this.map.addOverlay(marker);           // 将标注添加到地图中

    var ac = new BMap.Autocomplete({
    //建立一个自动完成的对象
    input: "suggestId",
    location: this.map
    });
    var myValue;
   ac.addEventListener("onconfirm", (e)=> {
    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myValue =_value.province +_value.city +_value.district +_value.street +_value.business;
    this.address_detail = myValue;
    this.setPlace();
   });
   },
   getMarker (point) {
        this.mk = new BMap.Marker(point); 
        this.mk.addEventListener("dragend", this.showInfo);
        this.mk.enableDragging();  //可拖拽
        this.getAddress(point);
        this.map.addOverlay(this.mk);//把点添加到地图上 
        this.map.panTo(point);
   },
   getlocation () {
    //获取当前位置
    var geolocation = new BMap.Geolocation(); 
    geolocation.getCurrentPosition((r) =>{ 
      if(geolocation.getStatus() == BMAP_STATUS_SUCCESS){ 
        this.getMarker(r.point);
        this.userlocation = r.point;
      }else { 
        alert('failed'+this.getStatus()); 
      } 
    });
   },
   //绑定Marker的拖拽事件
     showInfo(e){
      var gc = new BMap.Geocoder();
      gc.getLocation(e.point, (rs)=>{
        var addComp = rs.addressComponents;
        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址

        //画图 ---》显示地址信息
        var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
        this.map.removeOverlay(this.mk.getLabel());//删除之前的label

        this.mk.setLabel(label);
        this.address_detail = address;
        this.userlocation = e.point;

       });
    },
     //获取地址信息,设置地址label
     getAddress(point){
      var gc = new BMap.Geocoder();

      gc.getLocation(point, (rs)=>{
        var addComp = rs.addressComponents;
        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址

        //画图 ---》显示地址信息
        var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
        this.map.removeOverlay(this.mk.getLabel());//删除之前的label
        this.address_detail = address;
        this.mk.setLabel(label);

       });

    },
    setPlace() {
    this.map.clearOverlays(); //清除地图上所有覆盖物
    var th = this
    function myFun() {
     th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
     th.map.centerAndZoom(th.userlocation, 18);
     th.getMarker(th.userlocation);
    }

    var local = new BMap.LocalSearch(this.map, {
     onSearchComplete: myFun //智能搜索
    });
    local.search(this.address_detail);
   },
   search () {
       var localSearch = new BMap.LocalSearch(this.map);
       localSearch.enableAutoViewport(); //允许自动调节窗体大小
       this.searchByInputName(localSearch);
 },
   searchByInputName(localSearch) {
     this.map.clearOverlays(); //清空原来的标注
     var th = this;
     var keyword = this.address_detail;
     localSearch.setSearchCompleteCallback(function(searchResult) {
       var poi = searchResult.getPoi(0);
       th.userlocation = poi.point;
       th.map.centerAndZoom(poi.point, 13);
       th.getMarker(th.userlocation);
    });
     localSearch.search(keyword);
   },
   onCopy () {
     this.$message('内容已复制到剪贴板!');
   },
   onError () {
     this.$message('内容复制失败,请重试!');

   }

 },
 mounted() {
  this.$nextTick(function() {
   this.drawMap();
  });

 }
};
</script>
<style scoped>
.allmap {
 width: 100%;
 height: 400px;
 font-family: "微软雅黑";
 border: 1px solid green;
}
.el-tag {
 cursor: pointer;
}
</style>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

 

总结

来得结果如下、

 

上述所述是作者给我们介绍的vue项目中使用百度地图的法子,希望对大家有着帮忙,假如我们有其它疑问请给自家留言,我会及时过来我们的。在此也万分多谢我们对台本之家网站的支撑!

4858美高梅 3

 

您或者感兴趣的稿子:

  • 浅谈Vue下使用百度地图的不难方法
  • Vue的百度地图插件尝试运用
  • Map.vue基于百度地图组件重构笔记分享

注意:v-if指令是依据标准表达式的值来实施要素的插入或然去除行为。

 

 

  

1.2 v-for指令

 

v-for命令基于二个数组渲染3个列表,它和JavaScript的遍历语法相似:

 

v-for="item in items"

 

items是三个数组,item是眼下被遍历的数组成分。

以身作则代码:

<body>
    <div id="app">
        <table style="width: 400px; height: 600px;" border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                </tr>

            </thead>
            <tbody>
                <tr v-for="item in items">
                    <td align="center"> {{item.name}}</td>
                    <td> {{item.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            items:[{name:'well',age:'20'},{name:'good',age:'19'},{name:'nice',age:'18'},{name:'ok',age:'17'},]
        }
    })
</script>

 

1.3
v-bind 指令能够在其名称前面带2个参数,中间放三个冒号隔绝,那些参数平时是HTML成分的特色(attribute),例如:v-bind:class

v-bind:argument="expression"

 

1.4 v-model

v-model(表单成分设置了现在会忽略掉value,checked,selected),常用在表单 <input> 及 <textarea>

让表单成分和数目达成双向绑定(映射关系)

示范代码

<div id="app">
    <p v-text="message"> </p>
    <input type="text" v-model="message">
</div>

</body>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"nice to meet you"
        }
    })
</script>

 

 

1.5
v-on 指令用于给监听DOM事件,它的用语法和v-bind是相仿的,例如监听<a>成分的点击事件:

<a v-on:click="doSomething">

有三种样式调用方法:绑定2个艺术(让事件指向方法的引用),也许使用内联语句。 Greet按钮将它的单击事件平昔绑定到greet()方法,而Hi按钮则是调用say()方法。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非平时见的供给。Vue.js
为 v-on 提供了风浪修饰符。在此以前提过,修饰符是由点先导的吩咐后缀来代表的。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive


    4858美高梅,




 

 

Vue.js为最常用的八个指令v-bindv-on提供了缩写形式。v-bind指令能够缩写为三个冒号,v-on指令能够缩写为@符号。

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

 

1.6 v-text指令主要是预防页面第3回加载时 {{}}
出现在页面上。将对象中多少变量值展现在绑定的价签内容上。

v-text="expresstion"

 

 

参考文献:

vue中怎么着落到实处数量的双向绑定

Vue.js——60分钟连忙入门

官网:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有