Map

vue版的腾讯地图

示例
  1. <nut-map class="map-box" :location="true" :option="map1"></nut-map>

  1. export default {
  2.     data(){
  3.         return{
  4.             map1:{
  5.                 id:'test1',        
  6.                 options:{                
  7.                     center:[39.914850, 116.403765],
  8.                     zoomControl: false,
  9.                     zoom: 15,
  10.                     minZoom:2,                
  11.                     maxZoom:18,
  12.                     mapZoomType:'CENTER',
  13.                     draggable: true,
  14.                     scrollwheel: true,
  15.                     disableDoubleClickZoom: true
  16.                 },
  17.                 marker:{          
  18.                         animation:'BOUNCE', //'BOUNCE'反复弹跳'DOWN'落下,'DROP'从天而降,'UP'升起              
  19.                         draggable: false,
  20.                         //自定义Marker图标为大头针样式    
  21.                         icon:"../../asset/img/map/mark.svg",           
  22.                         //设置Marker标题，鼠标划过Marker时显示
  23.                         title: '测试',
  24.                         //设置Marker的可见性，为true时可见,false时不可见
  25.                         visible: true,
  26.                         click:(res)=>{
  27.                             console.log(res)
  28.                         },
  29.                         info:(res)=>{
  30.                             console.log(res);
  31.                             return '';
  32.                         }
  33.                 }                
  34.             }
  35.         }
  36.     }
  37. }

Props
参数说明类型默认值可选值
search地图是否有搜索栏Booleantrue false
location地图是否需要有定位当前位置功能Booleantrue false
option用来配置地图初始化的参数包含id、marks和optionsObject——
option.id创建地图的IDString——
option.options地图的初始化配置参数Object同腾讯map API—
option.options.center地图的初始化配置参数 与 腾讯map API 差异Array[—,—]['lat：Number','lng:Number']
option.options.MapZoomType地图的初始化配置参数 与 腾讯map API 差异String'DEFAULT''CENTER'
option.options.MapTypeId地图的初始化配置参数 与 腾讯map API 差异String'ROADMAP''ROADMAP'该地图类型显示普通的街道地图。,'SATELLITE'该地图类型显示卫星图像。,'HYBRID'该地图类型显示卫星图像上的主要街道透明层。
option.markers用来配置地图的坐标显示Object同腾讯map API—
option.markers.iconmarker的自定义图片url——
option.markers.visible是否可见 默认可见Booleantruefalse
option.markers.animation设置动画Stringtruefalse
option.markers.draggable设置是否可以拖拽 默认不可以拖拽Booleanfalsetrue
Events
事件名说明回调参数
option.markers.info添加信息窗口,用于展示当前信息fn(res)=>{ res //为当前mark信息 return '信息'//为想要显示的信息 }
option.markers.click用于click事件回调返回当前marker信息fn(res)=>{ res //为当前mark信息 }
option.markers.dragend用于drag事件回调返回当前marker信息fn(res)=>{ res //为当前mark信息 }