Vue Baidu Map百度地图定位当前位置

小咪咪 2023-10-11 14:29 42阅读 0赞

<div>

<baidu-map

class="map"

@ready="handler"

style="height: 500px;"

:center="center"

:zoom="15"

:map-click="false"

ak="ug2vkDRbX17m76RVbIjkTXBOK46OBnkg"

<div>

<bm-marker

:dragging="true"

animation="BMAP\_ANIMATION\_BOUNCE"

:position="center"

@dragend="dragend"

>213</bm-marker>

</div>

</baidu-map>

</div>

</template>

import \{

BaiduMap,

BmControl,

BmView,

BmAutoComplete,

BmLocalSearch,

BmMarker,

BmGeolocation

\} from "vue-baidu-map";

export default \{

components: \{

BaiduMap,

BmControl,

BmView,

BmAutoComplete,

BmLocalSearch,

BmMarker,

BmGeolocation

\},

data() \{

return \{

center: \{\}

\};

\},

methods: \{

handler: function(\{ BMap, map \}) \{

map.enableScrollWheelZoom(true); //开启滚轮缩放

// map.centerAndZoom('青岛市', 13)

const hide = alert("正在获取当前省市请稍候..", 0);

const \_this = this;

const geolocation = new BMap.Geolocation();

geolocation.getCurrentPosition(

function(r) \{

setTimeout(hide, 1000);

console.log(r);

\_this.center = \{ lng: r.longitude, lat: r.latitude \}; // 设置center属性值

// \_this.autoLocationPoint = \{ lng: r.longitude, lat: r.latitude \} // 自定义覆盖物

\_this.initLocation = true;

\},

\{ enableHighAccuracy: true \}

);

window.map = map;

// 赋值，方便调用，本节被用到

this.BMap = BMap;

this.map = map;

\},

// 拖动结束后

dragend(e) \{

this.position = e.point;

const \_this = this;

console.log(e.point);

console.log(this.position);

const gc = new this.BMap.Geocoder();

gc.getLocation(e.point, function(rs) \{

console.log(rs);

// var addComp = rs.addressComponents

// this.addr = addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber

\_this.addr = rs.address;

\});

\};

</script>

<style>

</style>

Vue Baidu Map百度地图定位当前位置

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue Baidu Map百度地图定位当前位置

相关安卓开发——百度地图定位当前位置

相关百度地图 vue-map 根据状态定位多个

相关如何在vue-cli中引入百度地图(vue-Baidu-Map)

相关 Vue中使用百度地图demo Vue Baidu Map(vue-baidu-map)设置窗口信息

相关 uniapp使用百度地图 (vue 使用 vue-baidu-map)及坐标转换

相关百度地图定位

相关使用vue-baidu-map百度地图实现双向绑定

相关 vue使用百度地图 vue-baidu-map

相关使用Vue Baidu Map对百度地图实现输入框搜索定位