AI专业者开发社区 1 号成员
  •  0 回帖  •  6 浏览  •  4 个月前
 

vue中引入百度地图

 

 

xxx.vue

<template>
  <div>
    <el-input v-model="inputaddr">
    </el-input>
    <el-button @click="mapCpm"> 点击 </el-button>
    <el-dialog :modal-append-to-body="false"
               :title="textMap[dialogStatus]"
               :visible.sync="mapCPM">
      <baidu-map class="map"
                 :center="center"
                 :zoom="zoom"
                 @ready="handler"
                 :double-click-zoom='false'
                 :scroll-wheel-zoom='true'>
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                        :showAddressBar="true"
                        :autoLocation="true"
                        @locationSuccess='locationSuccess'></bm-geolocation>
        <bm-panorama></bm-panorama>
        <bm-marker :position="center"
                   @dragend="dragend"
                   :raiseOnDrag='true'
                   :dragging='true'>
        </bm-marker>
      </baidu-map>
      <el-row class="map_title">
        <el-col :span="20"
                class="map_title_span">
          <p> 经度：{{locationdata.center ? locationdata.center.lng : center.lng}}</p>
          <p> 纬度：{{locationdata.center ? locationdata.center.lat : center.lat}}</p>
          <p> 地址：{{locationdata.addr}}</p>
        </el-col>

    &lt;el-col :span=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">4</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
      &lt;el-button type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">info</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                 size</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">small</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                 @click</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">getmapdamodata()</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;提交&lt;/el-button&gt;
    &lt;/el-col&gt;
  &lt;/el-row&gt;
&lt;/el-dialog&gt;



</div>
</template>
<script>
export default {
data () {
return {
fullscreenLoading: false,//地图加载动画
// 地图初始化的位置
center: { lng: 113.18088529892, lat: 23.460952009562 },
// 地图内的大小
zoom: 15,
// 这个是搜索下的东西
location: '',
// 这个是选择搜索列表中数据的 title 以及经纬度
      locationdata: {
title: '',
center: '',
addr: ''//地址
      },
geolocation: "",
BMap: '',
textMap: {
map: '地图'
},
dialogStatus: 'map',
mapCPM: false,
inputaddr: ''
}
},
mounted () {


},
methods: {
// 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
    handler ({BMap, map}) {
const loading = this.$loading({//加载动画
lock: true,
text: '动图加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});


  window.map </span>= map; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册为全局</span>
  <span style="color: rgba(0, 0, 255, 1)">var</span> that = <span style="color: rgba(0, 0, 255, 1)">this</span>;  <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> map方法中的this指向不对。所有申明一个。。小细节的东西
  </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 刚进入页面中的定位，需要向用户授权</span>
  <span style="color: rgba(0, 0, 255, 1)">var</span> geolocation = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> BMap.Geolocation();
  console.log(geolocation)
  </span><span style="color: rgba(0, 0, 255, 1)">this</span>.geolocation =<span style="color: rgba(0, 0, 0, 1)"> geolocation;
  geolocation.getCurrentPosition(() </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log('data')
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> alert('nimamaipi')</span>



      })
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function (r) {


    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (<span style="color: rgba(0, 0, 255, 1)">this</span>.getStatus() ==<span style="color: rgba(0, 0, 0, 1)"> BMAP_STATUS_SUCCESS) {
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 把得到的经纬度传给map，就实现了第一步我们的定位</span>
      that.center =<span style="color: rgba(0, 0, 0, 1)"> {
        lng: r.point.lng,
        lat: r.point.lat
      }
      console.log(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">wang</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">, r)
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> var a = r.address.city
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> var b = r.address.district
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> var c = r.address.province
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> var d = r.address.street
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> var e = r.address.street_number

      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log(a);
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log(b);
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log(c);
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log(d);
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log(e);

      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> var f = ''
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this.locationdata.addr = ''
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> f = a + b + c + d + e
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this.locationdata.addr = f
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log(f);

      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this.locationdata.addr = r.address.city + r.address.district + r.address.province + r.address.street + r.address.street_number
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">   当用户拒绝该授权的时候，依然执行</span>
      <span style="color: rgba(0, 0, 255, 1)">if</span> (r.accuracy == <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">) {
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> alert('accuracy null:'+r.accuracy);
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">用户决绝地理位置授权</span>
        <span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">;
      }
    } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
      console.log(</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">failed</span><span style="color: rgba(128, 0, 0, 1)">'</span> + <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.getStatus());
    }
  }, { enableHighAccuracy: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> })
  </span><span style="color: rgba(0, 0, 255, 1)">this</span>.BMap =<span style="color: rgba(0, 0, 0, 1)"> BMap
  loading.close();
},
mapCpm () {
  </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">打开地图弹窗</span>
  <span style="color: rgba(0, 0, 255, 1)">this</span>.dialogStatus = <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">map</span><span style="color: rgba(128, 0, 0, 1)">'</span>
  <span style="color: rgba(0, 0, 255, 1)">this</span>.mapCPM = <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
},
locationSuccess (point, AddressComponent, marker) {
  </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定位成功后</span>



      console.log(point);
this.locationdata.center = point.point
this.locationdata.addr = point.addressComponent.city + point.addressComponent.district + point.addressComponent.province + point.addressComponent.street + point.addressComponent.streetNumber
this.center = point.point
},
//   选择 localtion 的值
// getlocalsearch (e) {
//   this.locationdata.title = e.address + e.title;
//   this.locationdata.center = e.point;
// },
dragend (type, target, pixel, point) { //拖拽结束触发
this.locationdata.center = type.point;
// this.position = type.point
const _this = this
const gc = new this.BMap.Geocoder()
gc.getLocation(type.point, function (rs) {
console.log("aaaaaaaaaaaaaaa", rs)
_this.locationdata.addr = rs.address
})
},
// 确定该信息然后存在 session 中
    getmapdamodata () {
this.inputaddr = this.locationdata.addr
this.mapCPM = false
}


}
}
</script>
<style>
.map {
width: 100%;
height: 500px;
}
.anchorBL {
display: none;
}
.map_title {
display: flex;
justify-content: center;
align-items: center;
padding: 0.1533rem;
}
</style>

 

 main.js

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak:  '百度 ak'
});

 

 

 

 

 

 

 

更新

 

 

 

<template>
  <div>

&lt;el-button @click=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">mapCpm</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;点击&lt;/el-button&gt;
&lt;el-dialog :modal-append-to-body=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">false</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
           :title</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">textMap[dialogStatus]</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
           :visible.sync</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">mapCPM</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;

  &lt;baidu-map <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">map</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
             :center</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">center</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
             :zoom</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">zoom</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
             @ready</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">handler</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
             :</span><span style="color: rgba(0, 0, 255, 1)">double</span>-click-zoom=<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">false</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">
             :scroll</span>-wheel-zoom=<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">true</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">
             @click</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">clickBaiDuMap</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;



    &lt;bm-view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">map</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;&lt;/bm-view&gt;
    &lt;bm-control :offset=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">{width: '10px', height: '10px'}</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
      &lt;bm-auto-complete v-model=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">keyword</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                        :sugStyle</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">{zIndex: 0}</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
        &lt;el-input placeholder=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">请输入地名关键字</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                  v</span>-model=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">keyword</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;&lt;/el-input&gt; &lt;!-- 这里指代一个自定义搜索框组件 --&gt;
        &lt;bm-local-search :keyword=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">keyword</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                         :auto</span>-viewport=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">true</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                         style</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">width:0px;height:0px;opacity:0</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;&lt;/bm-local-search&gt;

      &lt;/bm-auto-complete&gt;
    &lt;/bm-control&gt;





    &lt;bm-geolocation anchor=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">BMAP_ANCHOR_BOTTOM_RIGHT</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                    :showAddressBar</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">true</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                    :autoLocation</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">true</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                    @locationSuccess</span>=<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">locationSuccess</span><span style="color: rgba(128, 0, 0, 1)">'</span>&gt;&lt;/bm-geolocation&gt;
    &lt;bm-panorama&gt;&lt;/bm-panorama&gt;
    &lt;bm-marker :position=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">locationdata.center</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
               @dragend</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">dragend</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
               :raiseOnDrag</span>=<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">true</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">
               :dragging</span>=<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">true</span><span style="color: rgba(128, 0, 0, 1)">'</span>&gt;
    &lt;/bm-marker&gt;
  &lt;/baidu-map&gt;
  &lt;el-row <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">map_title</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
    &lt;el-col :span=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">20</span><span style="color: rgba(128, 0, 0, 1)">"</span>
            <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">map_title_span</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
      &lt;p&gt;经度：{{locationdata.center ? locationdata.center.lng : center.lng}}&lt;/p&gt;
      &lt;p&gt;纬度：{{locationdata.center ? locationdata.center.lat : center.lat}}&lt;/p&gt;
      &lt;p&gt;地址：{{locationdata.addr}}&lt;/p&gt;
    &lt;/el-col&gt;

    &lt;el-col :span=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">4</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
      &lt;el-button type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">info</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                 size</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">small</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
                 @click</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">getmapdamodata()</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;提交&lt;/el-button&gt;
    &lt;/el-col&gt;
  &lt;/el-row&gt;
&lt;/el-dialog&gt;



</div>
</template>
<script>
export default {
data () {
return {
keyword: '',
city: '',//输入框搜索内容
address_detail: null, //详细地址
fullscreenLoading: false,//地图加载动画
// 地图初始化的位置
center: { lng: 113.18088529892, lat: 23.460952009562 },
// 地图内的大小
zoom: 15,
// 这个是搜索下的东西
location: '',
// 这个是选择搜索列表中数据的 title 以及经纬度
      locationdata: {
title: '',
center: '',
addr: ''//地址
      },
geolocation: "",
BMap: '',
textMap: {
map: '地图'
},
dialogStatus: 'map',
mapCPM: false,
inputaddr: ''
}
},
mounted () {


},
methods: {
// 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
    handler ({BMap, map}) {
const loading = this.$loading({//加载动画
lock: true,
text: '动图加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});


  window.map </span>= map; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册为全局</span>
  <span style="color: rgba(0, 0, 255, 1)">var</span> that = <span style="color: rgba(0, 0, 255, 1)">this</span>;  <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> map方法中的this指向不对。所有申明一个。。小细节的东西
  </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 刚进入页面中的定位，需要向用户授权</span>
  <span style="color: rgba(0, 0, 255, 1)">var</span> geolocation = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> BMap.Geolocation();
  console.log(geolocation)
  </span><span style="color: rgba(0, 0, 255, 1)">this</span>.geolocation =<span style="color: rgba(0, 0, 0, 1)"> geolocation;
  geolocation.getCurrentPosition(() </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log('data')
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> alert('nimamaipi')</span>



      })
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function (r) {


    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (<span style="color: rgba(0, 0, 255, 1)">this</span>.getStatus() ==<span style="color: rgba(0, 0, 0, 1)"> BMAP_STATUS_SUCCESS) {
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 把得到的经纬度传给map，就实现了第一步我们的定位</span>
      that.center =<span style="color: rgba(0, 0, 0, 1)"> {
        lng: r.point.lng,
        lat: r.point.lat
      }
      console.log(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">wang</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">, r)

      </span><span style="color: rgba(0, 0, 255, 1)">var</span> a =<span style="color: rgba(0, 0, 0, 1)"> r.address.city
      </span><span style="color: rgba(0, 0, 255, 1)">var</span> b =<span style="color: rgba(0, 0, 0, 1)"> r.address.district
      </span><span style="color: rgba(0, 0, 255, 1)">var</span> c =<span style="color: rgba(0, 0, 0, 1)"> r.address.province
      </span><span style="color: rgba(0, 0, 255, 1)">var</span> d =<span style="color: rgba(0, 0, 0, 1)"> r.address.street
      </span><span style="color: rgba(0, 0, 255, 1)">var</span> e =<span style="color: rgba(0, 0, 0, 1)"> r.address.street_number

      console.log(a);
      console.log(b);
      console.log(c);
      console.log(d);
      console.log(e);

      </span><span style="color: rgba(0, 0, 255, 1)">var</span> f = <span style="color: rgba(128, 0, 0, 1)">''</span>
      <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">this.locationdata.addr = ''</span>
      f = a + b + c + d +<span style="color: rgba(0, 0, 0, 1)"> e
      window.title </span>= f;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册为全局
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this.locationdata.addr = f</span>



          console.log(f);
// this.locationdata.addr = r.address.city + r.address.district + r.address.province + r.address.street + r.address.street_number
//   当用户拒绝该授权的时候，依然执行
if (r.accuracy == null) {
// alert('accuracy null:'+r.accuracy);
//用户决绝地理位置授权
return;
}
} else {
console.log('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
this.BMap = BMap
loading.close();
},
mapCpm () {
//打开地图弹窗
setTimeout(() => {
if (window.title != '' && window.title != null) {
this.locationdata.addr = window.title
window.title = ''
}
}, 1000)


  console.log(window.title);


  </span><span style="color: rgba(0, 0, 255, 1)">this</span>.dialogStatus = <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">map</span><span style="color: rgba(128, 0, 0, 1)">'</span>
  <span style="color: rgba(0, 0, 255, 1)">this</span>.mapCPM = <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
},
locationSuccess (point, AddressComponent, marker) {
  </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定位成功后</span>



      console.log(point);
this.locationdata.center = point.point
this.locationdata.addr = point.addressComponent.city + point.addressComponent.district + point.addressComponent.province + point.addressComponent.street + point.addressComponent.streetNumber
this.center = point.point
},
//   选择 localtion 的值
// getlocalsearch (e) {
//   this.locationdata.title = e.address + e.title;
//   this.locationdata.center = e.point;
// },
dragend (type, target, pixel, point) { //拖拽结束触发
this.locationdata.center = type.point;
// this.position = type.point
const _this = this
const gc = new this.BMap.Geocoder()
gc.getLocation(type.point, function (rs) {
console.log("aaaaaaaaaaaaaaa", rs)
_this.locationdata.addr = rs.address
})
},
// 确定该信息然后存在 session 中
    getmapdamodata () {
this.inputaddr = this.locationdata.addr
this.mapCPM = false
},
clickBaiDuMap (type, target, point, pixel, overlay) {
console.log(type);
console.log(target); console.log(point); console.log(pixel); console.log(overlay);
this.locationdata.center = type.point;
// this.center = type.point
// this.position = type.point
const _this = this
const gc = new this.BMap.Geocoder()
gc.getLocation(type.point, function (rs) {
console.log("aaaaaaaaaaaaaaa", rs)
_this.locationdata.addr = rs.address
})
},


}
}
</script>
<style scoped>
.map {
width: 100%;
height: 500px;
}
.anchorBL {
display: none;
}
.map_title {
display: flex;
justify-content: center;
align-items: center;
padding: 0.1533rem;
}
</style>