Rumah > hujung hadapan web > View.js > Cara menggunakan versi baharu Amap dalam projek vue3

Cara menggunakan versi baharu Amap dalam projek vue3

王林
Lepaskan: 2023-05-29 20:40:17
ke hadapan
2714 orang telah melayarinya

1. Mula-mula anda perlu mendaftar akaun dan log masuk

Cara menggunakan versi baharu Amap dalam projek vue3

2. Dapatkan kunci dan kunci

Cara menggunakan versi baharu Amap dalam projek vue3

Cara menggunakan versi baharu Amap dalam projek vue3

Dinaik taraf sejak 2 Disember 2021. Kunci yang dipohon selepas naik taraf mesti dilengkapi dengan kunci keselamatan jscode untuk digunakan bersama

Cara menggunakan versi baharu Amap dalam projek vue3

Pemasangan dan penggunaan kaedah NPM (versi asas):

Pemuat Pasang:

npm i @amap/amap-jsapi-loader --save
Salin selepas log masuk

Gunakan dalam halaman untuk digunakan dalam Kod halaman:

<template>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</template>
 
<script>
import AMapLoader from &#39;@amap/amap-jsapi-loader&#39;;
/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
import { shallowRef } from &#39;@vue/reactivity&#39;;
import {ref} from "vue";
 
// const map = shallowRef(null);
const path = ref([]);
const current_position = ref([]);
 
function initMap() {
    window._AMapSecurityConfig = {
        securityJsCode: &#39;8e920f73eb2e6880a92ea6662eefc476&#39;,
    }
    AMapLoader.load({
        key:"e4e3d44a98350790a1493450032bbec5", // 申请好的Web端开发者Key,首次调用 load 时必填
        version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
        plugins:[&#39;&#39;], // 需要使用的的插件列表,如比例尺&#39;AMap.Scale&#39;等
    }).then((AMap)=>{
        const map = new AMap.Map("container",{  //设置地图容器id
            viewMode:"3D",    //是否为3D地图模式
            zoom:13,           //初始化地图级别
            center:[113.808299,34.791787], //初始化地图中心点位置
        });
        
    }).catch(e=>{
        console.log(e);
    })
}
 
    initMap()
</script>
 
<style>
#container{
    padding:0px;
    margin: 0px;
    width: 100%;
    height: 800px;
}
</style>
Salin selepas log masuk

Penyampaian pemalam peta:

Penanda titik instance: Cara menggunakan versi baharu Amap dalam projek vue3

Kesan kaedah pertama:

Kesan kaedah kedua:Cara menggunakan versi baharu Amap dalam projek vue3

Gambarajah vektor--> Poliline:Cara menggunakan versi baharu Amap dalam projek vue3

Atas ialah kandungan terperinci Cara menggunakan versi baharu Amap dalam projek vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:yisu.com
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan