Merge branch 'dev' of https://github.com/jdf2e/nutui into dev

src/demo/map.vue

@@ -4,7 +4,7 @@
         <nut-demoheader 
         :name="$route.name"
         ></nut-demoheader>
-        <nut-map class="map-box" :option="map1"></nut-map>
+        <nut-map class="map-box" :location="true" :option="map1"></nut-map>
          <!-- <nut-map :id="test2" class="map-box" :option="options" :markers="markers"></nut-map> -->
         <!-- DEMO区域 -->
     </div>
@@ -18,6 +18,7 @@ export default {
                 id:'test1',        
                 options:{                
                     center:[39.914850, 116.403765],
+                    zoomControl: false,
                     zoom: 15,
                     minZoom:2,                
                     maxZoom:18,
@@ -27,23 +28,27 @@ export default {
                     scrollwheel: true,
                     disableDoubleClickZoom: true
                 },
-                markers:[
-                    {
-                        //设置Marker的位置坐标
-                        position:[39.914850, 116.403765],                
-                        animation:'BOUNCE', //'BOUNCE'反复弹跳'DOWN'落下,'DROP'从天而降,'UP'升起  
+                marker:{          
+                       // animation:'BOUNCE', //'BOUNCE'反复弹跳'DOWN'落下,'DROP'从天而降,'UP'升起  
                         //设置Marker可拖动
-                        draggable: true,
-                        //自定义Marker图标为大头针样式
-                        icon:"../../asset/img/cases/fuli.png",
+                        draggable: false,
+                        //自定义Marker图标为大头针样式    
+                        icon:"../../asset/img/map/mark.svg",
                         //自定义Marker图标的阴影
                         //shadow:"",
                         //设置Marker标题，鼠标划过Marker时显示
                         title: '测试',
                         //设置Marker的可见性，为true时可见,false时不可见
-                        visible: true
-                    }
-                ]
+                        visible: true,
+                        click:(res)=>{
+                            console.log(res)
+                        },
+                        info:(res)=>{
+                            console.log(res);
+                            return '';
+                        }
+                }
+                
             }
 
         }

src/demo/shortpwd.vue

@@ -1,6 +1,11 @@
 <template>
+
     <div class="wrapper">
-        <a href="javascript:;" @click="showShortpwd">点击打开短密码框</a>
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <br>
+        <a href="javascript:;" @click="showShortpwd" class="button button-primary" >点击打开短密码框</a>
         <nut-shortpwd  :show="isShow"  @close="shortpwdClose"/>
     </div>
 </template>

src/package/map/src/jsonp.js

@@ -0,0 +1,32 @@
+
+function jsonp (options){
+    let creatTime ='jsonp' + Number(new Date());    
+    let option = {};
+    option = Object.assign(option,options);      
+    let params = "";
+    let url = option.url;
+    if(option.data){
+        for(let key in option.data){
+            params = params + key + '=' + option.data[key] + '&';
+        }
+    }
+    url = url + '?'+params;  
+    return new Promise(function (resolve, reject) {
+        window.onBack = (res)=>{
+            console.log(res);                  
+            resolve(res);
+            setTimeout(() => {
+                let needDelete = document.querySelector('#'+creatTime);
+                needDelete&&needDelete.remove();
+            }, 0);
+        };
+        let script = document.createElement("script");        
+        script.type = "text/javascript";
+        script.async = true;
+        script.id=creatTime;
+        script.src = url+ "output=jsonp&callback=onBack";
+        document.head.appendChild(script);
+        script.onerror = reject;
+    })   
+}
+export default jsonp;

src/package/map/src/location.js

@@ -0,0 +1,23 @@
+const initLoaction = () => {
+   
+     //初始化地图信息    
+     let tcMapScript = document.querySelector('#initLoaction');
+     return new Promise(function (resolve, reject) {
+             window.initLoaction = function () {    
+                
+                // window.lc = res;                    
+                 resolve();
+             };
+             if(!tcMapScript){
+                 let script = document.createElement("script");
+                 script.id="initLoaction"
+                 script.type = "text/javascript";
+                 script.src = "https://apis.map.qq.com/tools/geolocation/min?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp&callback=initLoaction";
+                 script.onerror = reject;
+                 document.head.appendChild(script);
+             }else{                 
+                resolve();  
+             }            
+     })
+}
+export default initLoaction;

src/package/map/src/map.scss

@@ -0,0 +1,121 @@
+.nutui-mapbox{
+    position: relative;
+    width: 100%;
+    height: 100%;    
+    .search{
+        position: relative;
+        z-index: 2;        
+    }
+    .nut-map{       
+        position: absolute;
+        width: 100%;
+        height: 100%;   
+        top:0;
+        left: 0;
+    }
+    .search{
+        .inpt-box{
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            padding:0 .4rem;
+            top:0;
+            left: 0;
+            z-index: 2;
+            box-sizing: border-box;
+            background: none;
+            border:none;
+            //opacity: 0;
+            &:focus{
+                outline: none;
+            }
+        }
+        .title-box{
+            font-size: .24rem;        
+            float: left;
+            opacity: 0;
+        }
+        .text-msg{
+            position: relative;
+            z-index: 1;
+            width:100%;
+            height: 1.1rem;
+            line-height: 1.1rem;
+            padding:0 .4rem;
+            background: #fff;
+            box-sizing: border-box;
+            border:1px solid #f4f4f4;
+            .city-box,.adr-box{            
+                background:  rgb(83, 153, 245);
+                color:#fff;
+                padding:0 .1rem;
+                border-radius: .1rem;     
+                line-height: .4rem;
+                height: .4rem;
+                font-size:.18rem;      
+            }
+            .city-box{
+                position: absolute;
+                right: .2rem;
+                top:50%;
+                transform: translateY(-50%);
+            }
+            .adr-box{
+                background:  rgba(226, 10, 10, 0.5);
+                margin:0 .05rem;
+                vertical-align: text-top;
+            }       
+        }
+    }
+    .suggest-box{
+        position: absolute;
+        top:1.2rem;
+        width: 100%;
+        list-style: none;
+        background: rgba(255, 255, 255, 0.9);
+        border:1px solid rgb(221, 229, 241);        
+        box-shadow: 1px 5px 5px #f4f4f4;
+        box-sizing: border-box;
+        margin:0;
+        padding:0;
+        li{
+            font-size: .24rem;
+            padding:0 .06rem 0 .3rem;
+            display: flex;
+            align-items:center;
+            .mark{
+                width: .5rem;
+                text-align: center;         
+                img{
+                    width: .25rem;
+                }
+            }
+            .msg{
+                padding:.38rem 0 .34rem 0;
+                border-top:1px solid #f4f4f4;
+                flex-grow:2;
+                flex-basis: auto;
+                .tit{
+                    font-size: .28rem;
+                    color:#333;
+                }
+                .adr{
+                    font-size:.24rem;
+                    color:#999;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+            }      
+            .msg:first-child{
+                border-top:none;
+            }
+        }
+    }
+    .map-ca{
+        position: absolute;
+        z-index: 3;
+        left: .1rem;
+        bottom: .8rem;
+    }
+}

src/package/map/src/map.vue

@@ -1,7 +1,32 @@
 <template>
     <div class="nutui-mapbox">
-        <div class="search"><input type="text" @keyup="searchKeyword" v-model="Keyword"/></div>
-        <div class="nut-map" :id="option.id"></div>
+        <div class="search">            
+            <div v-if="search" class="text-msg">
+                <input placeholder="请输入搜索内容" class="inpt-box" type="sreach" @keyup="searchKeywordlike" v-model="Keyword" />
+                <span class="title-box">{{Keyword}}</span>
+                <span v-if="fristCity" class="city-box">{{fristCity}}</span>               
+            </div>
+            <ul v-show="suggestShow&&address.length>0" class="suggest-box">
+                <li v-for="(item,index) of address" :key="index" @click="searchcomplete(item)" class="list">
+                    <div class="mark">                        
+                         <svg width="18" height="18">
+                            <use xlink:href="#location"/>
+                        </svg>
+                        </div>
+                    <div class="msg">
+                        <div class="tit" v-html="item.title"></div>
+                        <div class="adr">{{item.address}}</div>                       
+                    </div>
+                    
+                </li>
+            </ul>
+        </div>
+        <!-- 定位 -->
+        <svg v-if="location" class="map-ca" width="30" height="30" @click="getlocationApp">
+            <use xlink:href="#getlocation"/>
+        </svg>
+        <!-- 地图 -->
+        <div @click="closeSuggest" class="nut-map" :id="option.id"></div>
     </div>
     
     <!-- 
@@ -12,122 +37,213 @@
     -->
 </template>
 <script>
+import './map.scss';
+import jsonp from "./jsonp.js";
+import getMap from './tcMap.js';
+import latSvg from '../../../asset/img/map/location.svg';
+import getlocation from '../../../asset/img/map/getlocation.svg';
+import getolocation from './location.js';
 export default {
     name:'nut-map',
     props: {
         //地图的秘钥
         key:{
             type:String,
-            default:"MNFBZ-3F2AJ-655FS-F7GI2-PM5WV-SJBIO"
+            default:"K3HBZ-ZSA3U-BMUVL-BUEEN-FL6JT-XUFLM"
+        },
+        keySky:{
+            type:String,
+            default:""
+        },
+        sn:{
+            type:String,
+            default:"136884f65834d7996cb7f3e0e4d4caca"
         },
         option:{
             type:Object,
             default:{}
-        }        
+        },
+        search:{
+            type:Boolean,
+            default:true
+        },
+        location:{
+            type:Boolean,
+            default:true
+        }    
     },
-    data() {
+    data() {       
         return {
             Keyword:'',
             map:null,
             tc:null,           
             searchService:null,
             markerArrays:[],
-            searchMarkers:[]
+            searchMarkers:[],
+            searchreslut:[],
+            fristCity:'',
+            fristAddress:'',
+            firstTitle:"",
+            suggestShow:true,
+            timeSet:null,
+            delay:500,
+            address:[],
+            svgLc:latSvg
         };
     },
-    methods: {
+    methods: {        
+        //模糊查询
+        searchKeywordlike(e){  
+            //正常输入则显示查询列表
+            let keyword = this.Keyword;//搜索关键字
+            let that = this;
+            //按回车 选取列表第一个         
+            if(keyword&&e.keyCode == 13&&this.address[0]){               
+               this.fristAddress =this.address[0].address;
+               that.searchKeyword();
+               return;
+            }
+            //查询
+            if(keyword){  
+                this.requestAnimationFrame(()=>{                    
+                    jsonp({
+                            url:'http://apis.map.qq.com/ws/place/v1/suggestion',
+                            type:"JSONP",
+                            data:{
+                                keyword:keyword,                        
+                                key:that.key,
+                                sn:that.sn
+                            }
+                        }).then(res=>{              
+                            that.suggestShow = true;      
+                            console.log(res.data)     
+                            if(res.data){
+                                that.address = res.data;
+                                that.fristCity = res.data[0]&&res.data[0].city;     
+                            }               
+                    })
+                }) 
+            } else {
+                this.address = [];
+            }
+        },
+        // 有城市搜索
         searchKeyword(){
+            //以知城市进行搜索
                 let markers = this.searchMarkers;
                 let markerArrays = this.markerArrays;
-                var keyword = this.Keyword;//搜索关键字
-                var region = '衡水';//城市
-                var pageIndex = 1;
-                var pageCapacity = 10;// 设置每页搜索结果数
-                this.clearOverlays(markers);
-                this.clearOverlays(markerArrays);
-                //根据输入的城市设置搜索范围
-                this.searchService.setLocation(region);
-                //设置搜索页码
-                this.searchService.setPageIndex(pageIndex);
-                //设置每页的结果数
-                this.searchService.setPageCapacity(pageCapacity);
-                //根据输入的关键字在搜索范围内检索
-                this.searchService.search(keyword);
-                //根据输入的关键字在圆形范围内检索
-                //var region = new qq.maps.LatLng(39.916527,116.397128);
-                //searchService.searchNearBy(keyword, region , 2000);
-                //根据输入的关键字在矩形范围内检索
-                //region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
-                //searchService.searchInBounds(keyword, region);
-        },  
-        getMap() {
-            //初始化地图信息 
-            let that = this;
-            let tcMapScript = document.querySelector('#tcMapScript');
-            return new Promise(function (resolve, reject) {
-                    window.initTcMap = function () {     
-                        window.tcMap = qq;                    
-                        resolve(qq);
-                    };
-                    if(!tcMapScript){
-                        var script = document.createElement("script");
-                        script.id="tcMapScript"
-                        script.type = "text/javascript";
-                        script.src = "http://map.qq.com/api/js?v=2.exp&callback=initTcMap&key="+that.key;
-                        script.onerror = reject;
-                        document.head.appendChild(script);
-                    }else{
-                        if(window.tcMap){
-                            resolve(window.tcMap);
-                        }
-
-                    }
-                    
-            })
+                let keyword = this.Keyword;//搜索关键字
+                let region = this.fristCity;//城市
+                if(region){
+                    let pageIndex = 1;
+                    let pageCapacity = 20;// 设置每页搜索结果数
+                    this.clearOverlays(markers);
+                    this.clearOverlays(markerArrays);
+                    //根据输入的城市设置搜索范围
+                    this.searchService.setLocation(region);
+                    //设置搜索页码
+                    this.searchService.setPageIndex(pageIndex);
+                    //设置每页的结果数
+                    this.searchService.setPageCapacity(pageCapacity);
+                    //根据输入的关键字在搜索范围内检索
+                    this.searchService.search(keyword);
+                    this.closeSuggest();
+                }                
         },
-        marker(){            
+        closeSuggest(){
+            this.suggestShow = false;
+        },
+        searchcomplete(res){           
+            let map = this.map;
+            let tc = this.tc;
+            let searchMarkers = this.searchMarkers;             
+            let markerArrays = this.markerArrays;
+            //  清除之前的点
+            this.clearOverlays(searchMarkers);
+            this.clearOverlays(markerArrays);
+            this.marker(res.location);            
+            this.searchMarkers = searchMarkers;
+            //更新地图
+            let location = new tc.maps.LatLng(res.location.lat,res.location.lng); 
+            let latlngBounds = new tc.maps.LatLngBounds();
+            latlngBounds.extend(location);
+            map.fitBounds(latlngBounds);
+            this.Keyword = res.title;
+            this.fristCity = res.city;
+            this.closeSuggest();
+        },
+        marker(lc){    
+            console.log(lc)             
             let tc = this.tc;
             //当前的地图
             let map = this.map;
-            //地图显示的中心点（标记点）            
-            let markers = this.option.markers; 
-            //渲染坐标
-            for(let index=0,item;item=markers[index];index++){
-                //添加显示地图
-                item = Object.assign(item,{
-                    map:map
-                });                
-                //添加位置
-                if(item.position&&item.position[0]&&item.position[1]) {
-                    let position = new tc.maps.LatLng(item.position[0],item.position[1]);
-                    item = Object.assign(item,{                    
-                        position:position
-                    });
+            let searchMarkers = this.searchMarkers;    
+            console.log(searchMarkers) 
+            //设置坐标点
+            let marker = new tc.maps.Marker({
+                map: map,
+                position: new tc.maps.LatLng(lc.lat,lc.lng)
+            });            
+            searchMarkers.push(marker);
+            this.searchMarkers = searchMarkers;                   
+            let markerOption = this.option.marker; 
+            if(markerOption){   
+                //是否可见 默认可见
+                if(!markerOption.visible){
+                    marker.setVisible(markerOption.visible);
                 }
-                //添加动画                
-                if(item.animation){
-                    let animation = tc.maps.MarkerAnimation[item.animation];
-                    item = Object.assign(item,{                    
-                        animation:animation
-                    });
+                //设置动画
+                if(markerOption.animation){
+                    marker.setAnimation(tc.maps.MarkerAnimation[markerOption.animation]);
+                }
+                //设置是否可以拖拽 默认不可以拖拽
+                if(markerOption.draggable){
+                    marker.setDraggable(true);
+                }  
+                //设置自定义图片                     
+                if(markerOption.icon){                
+                    let icon = new tc.maps.MarkerImage(markerOption.icon);
+                    marker.setIcon(icon);
+                } 
+                if(markerOption.title) {
+                    marker.setTitle(markerOption.title);
                 }
-                //添加地图icon
-                if(item.icon){
-                    let icon = new tc.maps.MarkerImage(item.icon);
-                    item = Object.assign(item,{                    
-                        icon:icon
+                // //添加信息窗口
+                if(markerOption.info){
+                    var info = new tc.maps.InfoWindow({
+                        map: map
                     });
                 }
-                //添加地图阴影
-                if(item.shadow){
-                    let shadow = new tc.maps.MarkerImage(item.shadow);
-                    item = Object.assign(item,{                    
-                        shadow:shadow
+                //标记Marker点击事件
+                if(markerOption.click){
+                    tc.maps.event.addListener(marker, 'click', function() {
+                        console.log(marker.getPosition())
+                        if(markerOption.click){
+                            markerOption.click(marker)
+                        }
+                        if(markerOption.info){
+                            info.open();
+                            info.setContent(markerOption.info(marker));
+                            info.setPosition(marker.getPosition());
+                        }
+                        
                     });
                 }                
-                let marker = new tc.maps.Marker(item);
-                this.markerArrays.push(marker)
-            }            
+                //设置Marker停止拖动事件
+                if(markerOption.dragend){
+                    tc.maps.event.addListener(marker, 'dragend', function() {
+                      console.log(marker.getPosition())
+                        if(markerOption.marker){
+                            markerOption.click(marker)
+                        }
+                        if(markerOption.info){
+                            info.open();
+                            info.setContent(markerOption.info(marker));
+                            info.setPosition(marker.getPosition());
+                        }
+                    });
+                }
+            }      
         },
         clearOverlays(overlays) {
             let overlay;
@@ -145,25 +261,27 @@ export default {
                 //检索成功的回调函数
                 complete: function(results) {
                     //设置回调函数参数
-                    var pois = results.detail.pois;
+                    let pois = results.detail.pois;
                     if(pois){
-                        var infoWin = new tc.maps.InfoWindow({
+                        let infoWin = new tc.maps.InfoWindow({
                             map: map
                         });
-                        var latlngBounds = new tc.maps.LatLngBounds();
-                        for (var i = 0, l = pois.length; i < l; i++) {
-                            var poi = pois[i];
+                        let latlngBounds = new tc.maps.LatLngBounds();
+                        for (let i = 0, l = pois.length; i < l; i++) {
+                            let poi = pois[i];
                             //扩展边界范围，用来包含搜索到的Poi点
                             latlngBounds.extend(poi.latLng);        
                             (function(n) {
-                                var marker = new tc.maps.Marker({
+                                let marker = new tc.maps.Marker({
                                     map: map
                                 });
+                                
                                 marker.setPosition(pois[n].latLng);        
                                 marker.setTitle(i + 1);
                                 searchMarkers.push(marker);
                                 tc.maps.event.addListener(marker, 'click', function() {
                                     infoWin.open();
+                                    console.log(pois);
                                     infoWin.setContent('<div style="width:280px;height:100px;">' + 'POI的ID为：' +
                                         pois[n].id + '，POI的名称为：' + pois[n].name + '，POI的地址为：' + pois[n].address + '，POI的类型为：' + pois[n].type + '</div>');
                                     infoWin.setPosition(pois[n].latLng);
@@ -186,6 +304,10 @@ export default {
             //console.log(tt);
             let tt = this.tc;
             let propsOptions = this.option.options; 
+            let langs = {
+                 lat:propsOptions.center[0],
+                    lng:propsOptions.center[1]
+            }
             //
             let center = null; 
             let id = this.option.id;
@@ -214,41 +336,61 @@ export default {
             let elm = document.querySelector('#'+id);
             this.map  = new tt.maps.Map(elm,propsOptions);
             //是否创建一个marker 检索
-            this.$nextTick(()=>{
-                this.marker();
+            this.$nextTick(()=>{                
+                this.marker(langs);
                 this.newSearchService();
             })     
             //是否有检索功能
-
+        },
+        requestAnimationFrame (callback) {
+            let delay = this.delay;
+            let timeSet = this.timeSet;
+            if(timeSet){
+                clearTimeout(timeSet);
+            }
+            this.timeSet = setTimeout(() => {                              
+                    callback()
+                }, delay)        
+        },
+        getlocationApp(){
+            let that = this;
+            let tc = this.tc;
+            getolocation().then(()=>{
+                let geolocation = new tc.maps.Geolocation();
+                geolocation.getLocation(ops=>{                    
+                    // res.location.lat,res.location.lng
+                    if(ops){
+                        let res = {
+                            location:{
+                                lat:ops.lat,
+                                lng:ops.lng
+                            }
+                        }                        
+                         that.searchcomplete(res);
+                    }
+                   
+                })
+            })
         }
     },
     mounted(){
         let that = this;
-        this.getMap().then(
+        let key = that.key;
+        getMap(key).then(
             qq=>{
                 that.tc = qq;
                 that.init();
+                if(that.location){
+                    that.getlocationApp();
+                }
+                
             }
         );
+        // 定位当前
+        
     }
 }
 </script>
 <style lang="scss">
-.nutui-mapbox{
-    position: relative;
-    .search{
-        position: absolute;
-        z-index: 2;
-        top: 26px;
-        left: 71px;
-    }
-    .nut-map{
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top:0;
-        left:0;
-        z-index: 1;
-    }
-}
+
 </style>

src/package/map/src/tcMap.js

@@ -0,0 +1,24 @@
+const initMap = (key) => {
+    //初始化地图信息    
+    let tcMapScript = document.querySelector('#tcMapScript');
+    return new Promise(function (resolve, reject) {
+            window.initTcMap = function () {     
+                window.tcMap = qq;                    
+                resolve(qq);
+            };
+            if(!tcMapScript){
+                let script = document.createElement("script");
+                script.id="tcMapScript"
+                script.type = "text/javascript";
+                script.src = "http://map.qq.com/api/js?v=2.exp&callback=initTcMap&key="+key;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }else{
+                if(window.tcMap){
+                    resolve(window.tcMap);
+                }
+
+            }            
+    })
+}
+export default initMap;

src/view/map.vue

@@ -14,21 +14,106 @@
             <table class="u-full-width">
             <thead>
                 <tr>
-                <th>参数</th>
-                <th>说明</th>
-                <th>类型</th>
-                <th>默认值</th>
-                <th>可选值</th>
+                    <th>参数</th>
+                    <th>说明</th>
+                    <th>类型</th>
+                    <th>默认值</th>
+                    <th>可选值</th>
                 </tr>
             </thead>
             <tbody>
+                <tr> 
+                    <td>search</td>
+                    <td>地图是否有搜索栏</td>
+                    <td>Boolean</td>
+                    <td>true </td>
+                    <td>false</td>
+                </tr>
+                <tr>
+                    <td>location</td>
+                    <td>地图是否需要有定位当前位置功能</td>
+                    <td>Boolean</td>
+                    <td>true </td>
+                    <td>false</td>
+                </tr>
+                <tr>
+                    <td>option</td>
+                    <td>用来配置地图初始化的参数包含id、marks和options</td>
+                    <td>Object</td>
+                    <td>--</td>
+                    <td>--</td>
+                </tr>                
+                <tr>
+                    <td>option.id</td>
+                    <td>创建地图的ID</td>
+                    <td>String</td>
+                    <td>--</td>
+                    <td>--</td>
+                </tr>   
+                <tr>
+                    <td>option.options</td>
+                    <td>地图的初始化配置参数</td>
+                    <td>Object</td>
+                    <td><a href="https://lbs.qq.com/javascript_v2/doc/mapoptions.html" target="_blank">同腾讯map API</a></td>
+                    <td>--</td>
+                </tr>
+                <tr>
+                    <td>option.options.center</td>
+                    <td>地图的初始化配置参数 与 腾讯map API 差异</td>
+                    <td>Array</td>
+                    <td>[--,--]</td>
+                    <td>['lat：Number','lng:Number']</td>
+                </tr>
+                <tr>
+                    <td>option.options.MapZoomType</td>
+                    <td>地图的初始化配置参数 与 腾讯map API 差异</td>
+                    <td>String</td>
+                    <td>'DEFAULT'</td>
+                    <td>'CENTER'</td>
+                </tr>
+                <tr>
+                    <td>option.options.MapTypeId</td>
+                    <td>地图的初始化配置参数 与 腾讯map API 差异</td>
+                    <td>String</td>
+                    <td>'ROADMAP'</td>
+                    <td>'ROADMAP'该地图类型显示普通的街道地图。<br>,'SATELLITE'该地图类型显示卫星图像。<br>,'HYBRID'该地图类型显示卫星图像上的主要街道透明层。</td>
+                </tr>
                 <tr>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
+                    <td>option.markers</td>
+                    <td>用来配置地图的坐标显示</td>
+                    <td>Object</td>
+                    <td><a href="https://lbs.qq.com/javascript_v2/doc/marker.html" target="_blank">同腾讯map API</a></td>
+                    <td>--</td>
                 </tr>
+                 <tr>
+                    <td>option.markers.icon</td>
+                    <td>marker的自定义图片</td>
+                    <td>url</td>
+                    <td>--</td>
+                    <td>--</td>
+                </tr>
+                <tr>
+                    <td>option.markers.visible</td>
+                    <td>是否可见 默认可见</td>
+                    <td>Boolean</td>
+                    <td>true</td>
+                    <td>false</td>
+                </tr>
+                <tr>
+                    <td>option.markers.animation</td>
+                    <td>设置动画</td>
+                    <td>String</td>
+                    <td>true</td>
+                    <td>false</td>
+                </tr>
+                <tr>
+                    <td>option.markers.draggable</td>
+                    <td>设置是否可以拖拽 默认不可以拖拽</td>
+                    <td>Boolean</td>
+                    <td>false</td>
+                    <td>true</td>
+                </tr>
+                 
             </tbody>
             </table>
         </div>
@@ -45,13 +130,37 @@
             </thead>
             <tbody>
                 <tr>
-                <td></td>
-                <td></td>
-                <td></td>
+                    <td>option.markers.info</td>
+                    <td>添加信息窗口,用于展示当前信息</td>
+                    <td>fn</td>
+                    <td>--</td>
+                    <td>(res)=>{
+                        res //为当前mark信息
+                        return '<div></div>'
+                        }</td>
+                </tr>
+                <tr>
+                    <td>option.markers.click</td>
+                    <td>用于click事件回调返回当前marker信息</td>
+                    <td>fn</td>
+                    <td>--</td>
+                    <td>(res)=>{
+                        res //为当前mark信息                        
+                        }</td>
+                </tr>
+                <tr>
+                    <td>option.markers.dragend</td>
+                    <td>用于drag事件回调返回当前marker信息</td>
+                    <td>fn</td>
+                    <td>--</td>
+                    <td>(res)=>{
+                        res //为当前mark信息                        
+                        }</td>
                 </tr>
             </tbody>
             </table>
-        </div>
+        </div>       
+        
     </div>   
 </template>
 

src/view/shortpwd.vue

@@ -1,6 +1,15 @@
 <template>
     <div>
-        
+        <nut-docheader 
+        :name="$route.name"
+        :chName="$route.params.chnName" 
+        type="Component" 
+        :showQrCode="true"
+        ></nut-docheader>
+        <h5>示例</h5>
+        <h6>使用实例</h6>
+        <nut-codebox code="<nut-shortpwd  :show=‘isShow’ @close=‘shortpwdClose’/>" 
+        imgUrl="http://img14.360buyimg.com/uba/jfs/t25372/227/245284728/74774/296adb9/5b69732eNad2c0231.png"></nut-codebox>
         <h5>Props</h5>
         <div class="tbl-wrapper">
         <table class="u-full-width">