1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| <template>
| <div class="maps">
| <div style="margin: 5px 0;">（说明：用于区分同名不同地区，例：关键字：南湖公园，地区：北京、天津不同地区）</div>
| <baidu-map
| class="maps"
| :center="center"
| :zoom="zoom"
| :scroll-wheel-zoom="true"
| :ak="ak"
| @click="getMapsInfo">
| <bm-view class="maps"></bm-view>
| <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
| </baidu-map>
| </div>
| </template>
|
| <script>
| import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
| import BmView from 'vue-baidu-map/components/map/MapView';
| import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue';
| export default {
| props: {
| center: {
| type: Object,
| },
| zoom: {
| type: Number
| },
| longitude: {
| type: [String, Number]
| },
| latitude: {
| type: [String, Number]
| },
| keyword: {
| type: String
| },
| location: {
| type: String
| }
| },
| components: {
| BaiduMap,
| BmView,
| BmLocalSearch
| },
| data() {
| return {
| // aks:"sUdSmbsNs3SD23Gk4dYZXIusmRtYC3w7"
| ak: "T7cpTR9uqOivVMmfcgC4TbNyVS2sbcMw"
| }
| },
| methods: {
| getMapsInfo({point}) {
| this.$emit('update:longitude', point.lng)
| this.$emit('update:latitude', point.lat)
| }
| }
| }
| </script>
|
| <style scoped lang="scss">
| .maps {
| width: 100%;
| height: 100%;
| }
|
| </style>
|
|
