Rumah hujung hadapan web Soal Jawab bahagian hadapan Bagaimana untuk melaksanakan paparan peta Baidu dalam projek vuejs

Bagaimana untuk melaksanakan paparan peta Baidu dalam projek vuejs

Sep 24, 2021 pm 04:42 PM
vue

Kaedah pelaksanaan: 1. Mohon kunci rahsia dalam "Platform Pembangunan Peta Baidu"; 2. Gunakan tag skrip dalam "index.html" untuk memperkenalkan pautan peta; kod js melaksanakan peta Baidu.

Bagaimana untuk melaksanakan paparan peta Baidu dalam projek vuejs

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

vue menggunakan peta Baidu dalam projek

Langkah pertama ialah pergi ke platform pembangunan peta Baidu http://lbsyun.baidu. com/ Mohon kunci rahsia.

Langkah kedua diperkenalkan dalam projek, seperti berikut

di mana index.html menyimpan pautan peta, kodnya adalah seperti berikut

Kemudian laksanakannya dalam APP.vue, kodnya adalah seperti berikut

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

<template>

 <div id="app">

  <div id="allmap" ref="allmap"></div>

  <router-view></router-view>

 </div>

</template>

   

<script>

export default {

 name: 'App',

 methods:{

  map(){

   let map =new BMap.Map(this.$refs.allmap); // 创建Map实例

   map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);// 初始化地图,设置中心点坐标和地图级别

   map.addControl(new BMap.MapTypeControl({//添加地图类型控件

    mapTypes:[

     BMAP_NORMAL_MAP,

     BMAP_HYBRID_MAP

    ]}));

   map.setCurrentCity("北京");// 设置地图显示的城市 此项是必须设置的

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

  }

   

 },

 mounted(){

  this.map()

   

 }

}

</script>

   

<style>

#app {

 font-family: 'Avenir', Helvetica, Arial, sans-serif;

 -webkit-font-smoothing: antialiased;

 -moz-osx-font-smoothing: grayscale;

 text-align: center;

 color: #2c3e50;

 margin-top: 60px;

}

#allmap{

 height: 500px;

 overflow: hidden;

   

}

</style>

Salin selepas log masuk

Cadangan berkaitan: "tutorial vue.js"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan paparan peta Baidu dalam projek vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan echarts dalam vue Cara menggunakan echarts dalam vue May 09, 2024 pm 04:24 PM

Cara menggunakan echarts dalam vue

Peranan lalai eksport dalam vue Peranan lalai eksport dalam vue May 09, 2024 pm 06:48 PM

Peranan lalai eksport dalam vue

Cara menggunakan fungsi peta dalam vue Cara menggunakan fungsi peta dalam vue May 09, 2024 pm 06:54 PM

Cara menggunakan fungsi peta dalam vue

Perbezaan antara acara dan $event dalam vue Perbezaan antara acara dan $event dalam vue May 08, 2024 pm 04:42 PM

Perbezaan antara acara dan $event dalam vue

Perbezaan antara eksport dan eksport lalai dalam vue Perbezaan antara eksport dan eksport lalai dalam vue May 08, 2024 pm 05:27 PM

Perbezaan antara eksport dan eksport lalai dalam vue

Peranan onmounted dalam vue Peranan onmounted dalam vue May 09, 2024 pm 02:51 PM

Peranan onmounted dalam vue

Apakah cangkuk dalam vue Apakah cangkuk dalam vue May 09, 2024 pm 06:33 PM

Apakah cangkuk dalam vue

Apakah senario yang boleh digunakan untuk pengubah suai peristiwa dalam vue? Apakah senario yang boleh digunakan untuk pengubah suai peristiwa dalam vue? May 09, 2024 pm 02:33 PM

Apakah senario yang boleh digunakan untuk pengubah suai peristiwa dalam vue?

See all articles