使用element-ui+腾讯地图实现地址选择

最近项目需要在后台使用地图选择，所以就使用element-ui+腾讯地图写了一个简单的地图选择的组件。

效果如下

一、主要步骤

• 新建一个组件
• 引入qqmap（因为腾讯没有针对于vue的地图api，所以使用第三方搭建好的） npm install qqmap
• 编写页面
• 编写事件

二、组件代码

<template>
// 使用的是抽屉弹出
    <el-drawer
            :wrapperClosable="false"
            size="40%"
            title="位置选择"
            :visible.sync="showStatus"
            direction="rtl"
            width="600px">
            // 搜索的表单
        <el-form style="margin-left: 20px" class="searchForm" size="small" :model="searchFrom">
            <el-row :gutter="5">
                <el-col :span="10">
                    <el-form-item prop="name">
                        <el-input clearable placeholder="请输入搜索位置信息"
                                  v-model="searchFrom.name"
                                  name="name"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button icon="el-icon-search" type="primary" size="mini"
                               @click="searchAddress">搜索位置
                    </el-button>
                </el-col>
            </el-row>
        </el-form>
        // 地图显示 注意id必须要加。因为下面会指定id加载地图
        <div id="mapContainer" style="width:100%;height:300px;"></div>
        // 附近地点显示
        <el-table
                highlight-current-row
                :data="nearPointList"
                max-height="300"