|
|
@@ -1,121 +0,0 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <label>关键词：<input v-model="keyword"></label>
|
|
|
- <label>地区：<input v-model="location"></label>
|
|
|
- <baidu-map
|
|
|
- :center="{ lng: 104.066, lat: 30.666 }"
|
|
|
- :scroll-wheel-zoom="true"
|
|
|
- :zoom="12"
|
|
|
- class="bm-view"
|
|
|
- @click="getClickInfo"
|
|
|
- @ready="onBaiduMapReady"
|
|
|
- >
|
|
|
- <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" />
|
|
|
- <!--比例尺控件左上角-->
|
|
|
- <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT" />
|
|
|
- <!--缩放控件右下角-->
|
|
|
- <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
|
|
|
- <bm-marker
|
|
|
- v-for="(item,index) in locations"
|
|
|
- :key="index"
|
|
|
- :position="item"
|
|
|
- >
|
|
|
- <bm-label
|
|
|
- :content="item.title"
|
|
|
- :label-style="{color: 'red', fontSize : '12px'}"
|
|
|
- :offset="{width: -35, height: 30}"
|
|
|
- />
|
|
|
- </bm-marker>
|
|
|
- </baidu-map>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
|
|
|
-import BmScale from 'vue-baidu-map/components/controls/Scale'
|
|
|
-import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
|
|
|
-import BmMarker from 'vue-baidu-map/components/overlays/Marker'
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- BaiduMap,
|
|
|
- BmScale, // 比例尺
|
|
|
- BmNavigation, // 缩放
|
|
|
- BmMarker // 标记
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- BMap: null,
|
|
|
- locations: [
|
|
|
- { title: '成都', lng: 104.066, lat: 30.666 },
|
|
|
- { title: '北京', lng: 116.404, lat: 39.915 }
|
|
|
- ],
|
|
|
- center: { title: '成都', lng: 104.066, lat: 30.666 },
|
|
|
- location: '成都',
|
|
|
- keyword: '环球中心'
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onBaiduMapReady(e) {
|
|
|
- const that = this
|
|
|
- this.BMap = e.BMap
|
|
|
- if (this.BMap) {
|
|
|
- // 获取定位地址信息并赋值给声明变量
|
|
|
- // Geolocation 对象的 getCurrentPosition()、watchPosition()、clearWatch() 方法详解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
|
|
|
- const geolocation = new this.BMap.Geolocation()
|
|
|
- // 通过 getCurrentPosition() 方法：获取当前的位置信息
|
|
|
- geolocation.getCurrentPosition(res => {
|
|
|
- console.log('返回详细地址和经纬度', res)
|
|
|
- const { lng, lat } = res.point
|
|
|
- const { province, city, district, street, street_number } = res.address
|
|
|
-
|
|
|
- that.center = { lng, lat }
|
|
|
- that.choosedLocation = { province, city, district, addr: street + street_number, lng, lat }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- getClickInfo(e) {
|
|
|
- console.log(e)
|
|
|
- // 调整地图中心位置
|
|
|
- this.center.lng = 104.066
|
|
|
- this.center.lat = 30.666
|
|
|
-
|
|
|
- // 此时已经可以获取到BMap类
|
|
|
- if (this.BMap) {
|
|
|
- const that = this
|
|
|
- // Geocoder() 类进行地址解析
|
|
|
- // 创建地址解析器的实例
|
|
|
- const geoCoder = new this.BMap.Geocoder()
|
|
|
- // getLocation() 类--利用坐标获取地址的详细信息
|
|
|
- // getPoint() 类--获取位置对应的坐标
|
|
|
- geoCoder.getLocation(e.point, function(res) {
|
|
|
- console.log('获取经纬度', e.point, '获取详细地址', res)
|
|
|
- const addrComponent = res.addressComponents
|
|
|
- const surroundingPois = res.surroundingPois
|
|
|
- const province = addrComponent.province
|
|
|
- const city = addrComponent.city
|
|
|
- const district = addrComponent.district
|
|
|
- let addr = addrComponent.street
|
|
|
- if (surroundingPois.length > 0 && surroundingPois[0].title) {
|
|
|
- if (addr) {
|
|
|
- addr += `-${surroundingPois[0].title}`
|
|
|
- } else {
|
|
|
- addr += `${surroundingPois[0].title}`
|
|
|
- }
|
|
|
- } else {
|
|
|
- addr += addrComponent.streetNumber
|
|
|
- }
|
|
|
- that.choosedLocation = { province, city, district, addr, ...that.center }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
- .bm-view {
|
|
|
- width: 100%;
|
|
|
- height: 600px;
|
|
|
- }
|
|
|
-</style>
|
