vue-baidu-map：实现地点搜索和路径规划

KiMiWaWonderful

于 2020-02-14 19:43:38 发布

阅读量3.3k

点赞数

分类专栏： Vue Web端百度地图

本文链接：https://blog.youkuaiyun.com/weixin_42112064/article/details/104317802

版权

一、自定义一个百度地图控件：

该控件包括一个输入框，用于输入要搜索的地址；一个路线按钮，点击后弹出面板，用于选择出行方式和输入始终点；一个搜索按钮。

<bm-control>
        <div id="searchbox" class="clearfix">
          <div id="searchbox-container">

            <div id="sole-searchbox-content" class="searchbox-content" style="display: block;">
              <input id="sole-input" class="searchbox-content-common cc_cursor" type="text" name="word" autocomplete="off" maxlength="256"
                     placeholder="搜地点"
                     v-model="keyword">
              <div class="input-clear cc_pointer" title="清空" style="display: block;"></div>
              <div class="searchbox-content-button right-button loading-button cc_pointer route-button"
                   data-title="路线" data-tooltip="1" @click="showPanel">
                <!--                <i class="el-icon-position" id="luxian"></i>-->
                <!--                <i id="luxian"> </i>-->
                <button id="luxian-button"></button>
                <!--            ::before-->
              </div>
            </div>

            <div id