Rumah > Artikel > hujung hadapan web > Contoh untuk menerangkan cara menggunakan API Peta Baidu dalam Vue
Contoh untuk menerangkan cara menggunakan API Peta Baidu dalam Vue
- PHPzasal
- 2023-04-11 10:40:081308semak imbas
Vue ialah rangka kerja JavaScript popular yang boleh membina aplikasi web satu halaman dengan cepat. API Peta Baidu ialah satu set API peta yang membenarkan pembangun menggunakannya dalam pelbagai aplikasi. Artikel ini akan memperkenalkan cara menggunakan API Peta Baidu dalam Vue dan kumpulan titik data mengikut peraturan tertentu melalui contoh.
Menggunakan API Peta Baidu
Sebelum menggunakan API Peta Baidu, anda perlu mendapatkan kunci pada Platform Pembangun Baidu. Jika anda belum mempunyai kunci, anda boleh pergi ke [Baidu Developer Platform](https://lbsyun.baidu.com/) untuk memohon.
Perkenalkan fail JS peta Baidu ke dalam projek Vue Anda boleh memperkenalkannya dalam fail index.html melalui teg skrip, atau anda boleh menggunakan pek web untuk membungkus fail JS dan mengimportnya.
<html> <head> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_app_key"></script> </head> <body> <div id="app"></div> </body> </html>
Gunakan fungsi kitaran hayat Vue untuk memulakan objek peta selepas komponen dipasang dan mengikat peta pada data komponen.
<template>
<div id="map" style="height: 500px"></div>
</template>
<script>
export default {
data() {
return {
map: null
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.map = new BMap.Map("map");
this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
}
}
};
</script>
Apabila terdapat berbilang titik data dalam halaman, adalah sangat menyusahkan untuk melabel setiap titik data pada peta. Berikut ialah cara menggunakan API Peta Baidu untuk mengumpulkan titik data.
Pengumpulan titik data peta
Dalam kes sejumlah besar titik data, pengumpulan data boleh memaparkan data dengan lebih baik dan meningkatkan kecekapan lukisan peta.
Pertama, buat komponen yang boleh menyebabkan titik data. Dalam komponen ini, format prop yang digunakan untuk latitud dan longitud titik data ditakrifkan.
<template>
<i
class="iconfont icon-marker"
:style="{
color: color,
fontSize: size + 'px',
left: point.lng + 'px',
top: point.lat + 'px'
}"
></i>
</template>
<script>
export default {
props: {
point: {
type: Object,
default() {
return {
lng: 0,
lat: 0
};
}
},
size: {
type: Number,
default: 24
},
color: {
type: String,
default: "#FF0000"
}
}
};
</script>
Seterusnya, kami akan memaparkan berbilang titik data dalam komponen induk (komponen peta). Untuk membezakan antara kumpulan yang berbeza, label untuk setiap titik data juga ditakrifkan.
<template>
<div id="map"></div>
<div v-for="(value, key) in markers" :key="key">
<h2>{{ key }}</h2>
<ul>
<li v-for="point in value" :key="point.id">
<MapMarker :point="point" :color="point.color" />
</li>
</ul>
</div>
</template>
<script>
import MapMarker from "@/components/MapMarker.vue";
export default {
data() {
return {
markers: {},
map: null
};
},
mounted() {
this.initMap();
this.renderMarkers();
},
methods: {
initMap() {
this.map = new BMap.Map("map");
this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
},
renderMarkers() {
const markerList = [
{
id: 1,
lng: 116.381374,
lat: 39.915146
},
{
id: 2,
lng: 116.403694,
lat: 39.927552
},
{
id: 3,
lng: 116.413807,
lat: 39.914235
},
{
id: 4,
lng: 116.399076,
lat: 39.920051
},
...
];
const bounds = this.map.getBounds();
const sw = bounds.getSouthWest();
const ne = bounds.getNorthEast();
markerList.forEach(marker => {
const point = new BMap.Point(marker.lng, marker.lat);
if (bounds.containsPoint(point)) {
const { id, lng, lat } = marker;
const group = Math.floor((lat - sw.lat) / (ne.lat - sw.lat) * 10);
if (!this.markers[group]) this.markers[group] = [];
this.markers[group].push({
id,
point,
lng,
lat,
color: "#FF0000"
});
}
});
}
},
components: {
MapMarker
}
};
</script>
Kod di atas menunjukkan cara melintasi markerList dalam komponen peta, mendapatkan kumpulan yang sepadan dengan setiap titik, dan kemudian memaparkan penanda dalam kumpulan.
Anda sudah selesai! Kini kami telah melaksanakan Vue untuk melaksanakan kumpulan pengurusan API Peta Baidu. Anda boleh menukar kod kepada aplikasi yang sesuai mengikut keperluan.
Atas ialah kandungan terperinci Contoh untuk menerangkan cara menggunakan API Peta Baidu dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!