vue使用 高德百度地图 管理后台选择位置

一、需求

vue管理后台某字段需要选择位置

（我这边使用的是vue2）

二、实现

ps:调试了很多方式，申请了高德 百度地图，调试了各种的方法，也尝试了高德官方的demo，都是无果，都显示不出来地图，最后使用了百度地图 + vue-baidu-map插件得以解决。

以下亲测可用

• 1.需要到百度地图开放平台申请账号

百度地图开放平台 | 百度地图API SDK | 地图开发

• 2.安装插件

 npm install vue-baidu-map --save 

• 3.导入插件

在main.js添加如下代码：

//百度地图 申请账号拿到ak
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '你自己申请的ak'  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
})

• 4.具体页面代码：

html

          <div class="map_pd">
            <div  class="map_pd1">
              <div>位置</div>
              <div><a-input v-model="address" disabled></a-input></div>
            </div>

            <div  class="map_pd2">
              <div>经度</div>
              <div><a-input v-model="center.lng" disabled></a-input></div>
            </div>

            <div  class="map_pd2">
              <div>维度</div>
              <div><a-input v-model="center.lat" disabled></a-input></div>
            </div>
            <div class="map_pd3" @click="composition"><button type="button" class="ant-btn ant-btn-primary">确定位置</button></div>
            
          </div>

          <div class="BaiDuMap">
            <baidu-map
              :center="center"
              :zoom="zoom"
              :scroll-wheel-zoom="true"
              style="width: 100%; height: 100%"
              @ready="handler"
              @click="getClickInfo"
              @moving="syncCenterAndZoom"
              @moveend="syncCenterAndZoom"
              @zoomend="syncCenterAndZoom"
            >
              <!-- 必须给容器指定一个高度 下面css里面指定 -->
              <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
              <bm-geolocation
                anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                :showAddressBar="true"
                :autoLocation="true"
              ></bm-geolocation>
              <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
            </baidu-map>
          </div>

 js

    data () {
      return {
      address: '重庆市',// 默认地址
      center: { lng: 106.554865, lat: 29.553907},
      zoom: 11//地图展示级别
    }
}

 点击 缩放两个方法

        //点击
        getClickInfo(e) {
          // 创建地理编码实例
          const myGeo = new BMap.Geocoder();
          // 根据坐标逆解析地址
          myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), (result) => {
            if (result) {
              this.address = result.address;
            }
          });
          this.center.lng = e.point.lng;
          this.center.lat = e.point.lat;

        },
        //缩放
        syncCenterAndZoom(e) {
          console.log(e.target, 'e.target-->>>>')
          const { lng, lat } = e.target.getCenter();
          this.zoom = e.target.getZoom();
        },

css:

.BaiDuMap {
  height: 400px;
}

效果图：