Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan paparan peta Baidu dalam projek vuejs
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.
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
<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>
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!