lc-map

支持当前位置定位；获取附近10个点坐标并进行逆地址解析；支持关键字匹配搜索，返回搜索到的数据列表，并在地图上显示匹配的地点标注。

注意事项

• 要使用地图组件首先得去百度地图官网注册key
• H5使用时,在index.html入口文件内添加百度地图JavaScript API接口(<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥" ></script>)
• JSN使用时，需要在native文件夹里的config.js内进行配置，具体方法详见

效果

使用方法

<template>
  <div class="wxc-demo">
    <title title="lc-map"></title>

    <category title="map组件"></category>
    <div style="flex-direction:row; width:750px; margin-top:10px;">
      <div class="func-btn" style="background-color:#f66;" @click="relocate">
        <text class="func-btn-text">重新定位</text>
      </div>
      <div class="func-btn" style="background-color:#6d6;" @click="getLocation">
        <text class="func-btn-text">获取位置接口</text>
      </div>
    </div>
    <div class="searchWrap">
        <input type="text" placeholder="搜索" class="input" @input="oninput"/>
        <text class="confirm" @click="searchLocation">确定</text>
    </div>
    <text class="warn">*JSN下需要打包才能预览效果</text>
    <lc-map ref="map" :mapHeight="600" 
        @getAddInfo="getAddInfo" 
        @getNearby="getNearby" 
        @locatedStatus="locatedStatus" 
        :searchRadius="800" 
        :intervalTime="10000">
    </lc-map>  

    <scroller style="height:300px;">
        <div v-for="(v,i) in result" :key="i">
          <text class="text">{{v}}</text>
        </div>
    </scroller>    

  </div>
</template>

<style scoped>
  .wxc-demo {
    background-color: #FFFFFF;
  }
  .func-btn {
		flex: 1;
		height: 80px;
		justify-content: center;
	}

	.func-btn-text {
		font-size: 32px;
		color: aliceblue;
		text-align: center;
	}
  .text{ text-align: left; margin-top: 10px;}
  .warn{ color: crimson; margin: 10px; font-size: 26px;}
  .searchWrap{ display: flex; flex-direction: row; margin-top: 10px; margin-left: 20px; margin-right: 20px;}
  .input{ flex:1; border-width: 1px; border-color: #999; padding-left: 20px;}
  .confirm{ width: 100px; height: 50px; background-color: #ffd000; color: #FFFFFF; margin-left: 20px; text-align: center;}
</style>

<script>
  import Light from 'light';
  import LcMap from 'lighting-ui/packages/lc-map';
  import LcButton from 'lighting-ui/packages/lc-button';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import Title from 'lighting-ui/packages/_mods/title.vue';
  const modal = Light.requireModule("modal");
  export default {
    components: { Title, Category, LcMap },
    data: () => ({
        result:'',
        searchValue:''
    }),
    created () {
    },
    methods: {
      // 定位当前位置
      relocate() {
          this.$refs.map.relocate();                    		  	
      },
      // 逆地址批量查询
      getLocation() {
          this.$refs.map.getLocation();                            
      },
      //搜索
      searchLocation(){
          if(this.searchValue==""){
            this.result = '';
            modal.toast({
              message: "搜索内容为空",
              duration: 1
            })
          }
          this.$refs.map.searchLocation(this.searchValue)
      },

      oninput(event){
          this.searchValue = event.value;
      },

      getAddInfo(inf){
          this.result = '';
          this.result = inf;                  
      },
      getNearby(nb){
          this.result = '';
          this.result = nb;     
      },
      locatedStatus(val){
          if(val=='success'){
              console.log("success")
          }else if(val=='failed'){
              console.log("failed")
          }
      }
    },
    mounted() {
    },
  };
</script>

可配置参数

Prop	Type	Required	Default	Description
mapHeight	Number	N	500	地图显示高度
searchRadius	Number	N	1000	圆形搜索半径区域大小(注1)
intervalTime	Number	N	30000	后台自动定位刷新时间

注1:

传入不小于0的数字，单位：米；如果传入为0，默认半径为1000米

主动触发设置

// 在lc-map组件上面绑定ref="map",然后调用即可
// 重新定位当前位置
this.$refs.map.relocate(); 

//获取定位点附近10个点的地理位置
this.$refs.map.getLocation();

// 关键词搜索
this.$refs.map.searchLocation(this.searchValue)

事件回调

@getAddInfo="getAddInfo"
//获取当前坐标点的逆地址信息

@getNearby="getNearby"
//获取关键字搜索返回数据信息

@locatedStatus="locatedStatus"
//成功或失败的回调，接收'success'和'failed'两个字段