2020-10-23

Vue项目中使用百度地图

引入vue-baidu- map其中需要的组件

import {BaiduMap, BmControl, BmAutoComplete,BmView,BmLocalSearch, BmMarker } from "vue-baidu-map";

 

 <baidu-map

          style="height: 500px"

          ak="ODy9MlXnW2V28TlPAmCCLledlCaqHYsG"  //ak 是在百度地图开发者平台申请秘钥

          :center="center"

          auto-resize

          :zoom="zoom"

          @click="getClickInfo"

          scroll-wheel-zoom     //鼠标滚动控制缩放

        >

          <bm-control>

            <bm-auto-complete v-model="keyword" :sugStyle="{ zIndex: 9999 }">

              <input placeholder="请输入地名关键字" />

            </bm-auto-complete>

          </bm-control>

          <bm-local-search

            :keyword="keyword"

            :auto-viewport="true"

            style="display: none"

          ></bm-local-search>

<!-- 标记点 -->

         <bm-marker

            :position="{ lng: addForm.longitude, lat: addForm.latitude }"

          ></bm-marker>

        </baidu-map>

data(){

    return {

       keyword: "",

        center: { lat: 32.06475172, lng: 118.80291402 },

        zoom: 11,

     }

}