欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何在 vue3 中使用高德地圖

 更新時(shí)間：2024年08月14日 12:13:09   作者：yqcoder  
這篇文章主要介紹了如何在 vue3 中使用高德地圖,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

前言：定位地圖位置所需要的經(jīng)緯度，可以通過(guò) 拾取坐標(biāo) 獲取。

一：快速上手

1. 安裝依賴

npm install @amap/amap-jsapi-loader
# or
pnpm add @amap/amap-jsapi-loader
# or
yarn add @amap/amap-jsapi-loader

2. 創(chuàng)建組件 src/components/Map.vue

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null;
onMounted(() => {
  AMapLoader.load({
    key: "", // 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
    version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 設(shè)置地圖容器id
        viewMode: "3D", // 是否為3D地圖模式
        zoom: 11, // 初始化地圖級(jí)別
        center: [116.397428, 39.90923], // 初始化地圖中心點(diǎn)位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});
onUnmounted(() => {
  map?.destroy();
});
</script>
<template>
  <div id="container"></div>
</template>
<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

3. 獲取 key 值

注冊(cè)高德賬號(hào)，注冊(cè)成功后登錄，然后 添加 key 值。復(fù)制添加后的 Key 值到組件，就可以使用了。

二：地圖配置

參考文檔 地圖 JS API

1. 展示地圖

1.1. 加載 JS API

AMapLoader.load({
  key: "「你申請(qǐng)的應(yīng)用key」", //申請(qǐng)好的Web端開發(fā)者key，調(diào)用 load 時(shí)必填
  version: "2.0", //指定要加載的 JS API 的版本，缺省時(shí)默認(rèn)為 1.4.15
})
  .then((AMap) => {
    //JS API 加載完成后獲取AMap對(duì)象
  })
  .catch((e) => {
    console.error(e); //加載錯(cuò)誤提示
  });

1.2. 地圖初始化

const map = new AMap.Map("container", {
  viewMode: "2D", //默認(rèn)使用 2D 模式
  zoom: 11, //地圖級(jí)別
  center: [116.397428, 39.90923], //地圖中心點(diǎn)
});

1.3. 主題樣式

通過(guò)在地圖初始化時(shí)設(shè)置 mapStyle 修改主題樣式，官方主題有 amap://styles/ 后面拼接：normal、grey、whitesmoke、dark、light、graffiti

map = new AMap.Map("container", {
  mapStyle: "amap://styles/whitesmoke", //設(shè)置地圖的顯示樣式
});

2. 展示圖層

2.1 創(chuàng)建圖層

const layer = new AMap.createDefaultLayer({
  zooms: [3, 20], //可見級(jí)別
  visible: true, //是否可見
  opacity: 1, //透明度
  zIndex: 0, //疊加層級(jí)
});

2.2 加載圖層

const map = new AMap.Map("container", {
  viewMode: "2D", //默認(rèn)使用 2D 模式
  zoom: 11, //地圖級(jí)別
  center: [116.397428, 39.90923], //地圖中心點(diǎn)
  layers: [layer], //layer為創(chuàng)建的默認(rèn)圖層
});

2.3 創(chuàng)建實(shí)時(shí)交通路況圖層

const traffic = new AMap.TileLayer.Traffic({
  autoRefresh: true, //是否自動(dòng)刷新，默認(rèn)為false
  interval: 180, //刷新間隔，默認(rèn)180s
});
map.add(traffic); //通過(guò)add方法添加圖層

2.4 路況圖層的顯示和隱藏

traffic.show(); //顯示路況圖層
traffic.hide(); //隱藏路況圖層

3. 添加地圖控件

JS API 提供了眾多的控件，需要引入之后才能使用這些控件的功能。常見的地圖控件有：縮放工具條 ToolBar、比例尺 Scale、定位按鈕 Geolocation 等。

3.1 引入地圖控件

//異步加載控件
AMap.plugin("AMap.ToolBar", function () {
  var toolbar = new AMap.ToolBar(); //縮放工具條實(shí)例化
  map.addControl(toolbar);
});

3.2 控制地圖控件顯示/隱藏

toolbar.show(); //縮放工具展示
toolbar.hide(); //縮放工具隱藏

4. 添加點(diǎn)標(biāo)記

點(diǎn)標(biāo)記是地圖覆蓋物中非常重要的要素之一，可以用來(lái)標(biāo)記地圖上的某個(gè)位置。

4.1 自定義 Marker

自定義 Marker 內(nèi)容可以是字符串拼接的 DOM 元素?？梢愿鶕?jù) class 名去定義樣式。

//點(diǎn)標(biāo)記顯示內(nèi)容
const markerContent = `<div class="custom-content-marker">
<img src="http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
<div class="close-btn" onclick="clearMarker()">X</div>
</div>`;

4.2 創(chuàng)建 Marker 對(duì)象

const position = new AMap.LngLat(116.397428, 39.90923); //Marker 經(jīng)緯度
const marker = new AMap.Marker({
  position: position,
  content: markerContent, //將 html 傳給 content
  offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 為原點(diǎn)
});

4.3 將 Marker 添加到地圖

map.add(marker);

4.4 給 Marker 綁定事件

function clearMarker() {
  map.remove(marker); //清除 marker
}
document.querySelector(".close-btn").onclick = clearMarker; //綁定點(diǎn)擊事件

5. 添加多邊形

多邊形矢量圖是地圖覆蓋物重要的地圖要素之一，可以用來(lái)突出標(biāo)記某個(gè)區(qū)域的形狀。

5.1 創(chuàng)建地圖

const map = new AMap.Map("container", {
  center: [121.045332, 31.19884], //地圖中心點(diǎn)
  zoom: 8.8, //地圖級(jí)別
});

5.2 創(chuàng)建 Polygon 對(duì)象

AMap.Polygon 對(duì)象為用戶提供在地圖圖面繪制多邊形的能力?？梢詾槎噙呅卧O(shè)置填充顏色 fillColor、描邊顏色 strokeColor、輪廓線樣式等屬性。

tips: path 是多邊形輪廓線的節(jié)點(diǎn)坐標(biāo)數(shù)組。多邊形支持普通多邊形，帶單個(gè)孔多邊形，帶多個(gè)孔多邊形類型繪制。

普通多邊形：path = [lnglat, lnglat ...] 或 path = [[lnglat, lnglat ...]]
帶單個(gè)孔多邊形：path = [[lnglat, lnglat ...], [ lnglat, lnglat ...]]
帶多個(gè)孔多邊形：path = [[lnglat, lnglat ...], [lnglat, lnglat ... ], [lnglat, lnglat ...] ...]

const pathArr = [
  [
    [
      [121.7789, 31.3102],
      [121.7279, 31.3548],
      [121.5723, 31.4361],
      [121.5093, 31.4898],
      [121.5624, 31.4864],
      [121.5856, 31.4547],
      [121.7694, 31.3907],
      [121.796, 31.3456],
      [121.7789, 31.3102],
    ],
  ],
];
const polygon = new AMap.Polygon({
  path: pathArr, //多邊形路徑
  fillColor: "#ccebc5", //多邊形填充顏色
  strokeOpacity: 1, //線條透明度
  fillOpacity: 0.5, //填充透明度
  strokeColor: "#2b8cbe", //線條顏色
  strokeWeight: 1, //線條寬度
  strokeStyle: "dashed", //線樣式
  strokeDasharray: [5, 5], //輪廓的虛線和間隙的樣式
});

5.3 給 Polygon 添加事件

//鼠標(biāo)移入更改樣式
polygon.on("mouseover", () => {
  polygon.setOptions({
    fillOpacity: 0.7, //多邊形填充透明度
    fillColor: "#7bccc4",
  });
});
//鼠標(biāo)移出恢復(fù)樣式
polygon.on("mouseout", () => {
  polygon.setOptions({
    fillOpacity: 0.5,
    fillColor: "#ccebc5",
  });
});

5.4 添加 Polygon 到地圖

map.add(polygon);

6. 搜索地點(diǎn)

AMap.PlaceSearch 地點(diǎn)搜索插件。

6.1 創(chuàng)建地圖

const map = new AMap.Map("container", {
  viewMode: "2D", //默認(rèn)使用 2D 模式
  zoom: 11, //地圖級(jí)別
  center: [116.397428, 39.90923], //地圖中心點(diǎn)
});

6.2 引入插件

通過(guò) AMap.plugin 方法按需引入插件

AMap.plugin(["AMap.PlaceSearch"], function () {
  const placeSearch = new AMap.PlaceSearch({
    pageSize: 5, //單頁(yè)顯示結(jié)果條數(shù)
    pageIndex: 1, //頁(yè)碼
    city: "010", //興趣點(diǎn)城市
    citylimit: true, //是否強(qiáng)制限制在設(shè)置的城市內(nèi)搜索
    map: map, //展現(xiàn)結(jié)果的地圖實(shí)例
    panel: "my-panel", //結(jié)果列表將在此容器中進(jìn)行展示。
    autoFitView: true, //是否自動(dòng)調(diào)整地圖視野使繪制的 Marker 點(diǎn)都處于視口的可見范圍
  });
  placeSearch.search("北京大學(xué)"); //使用插件搜索關(guān)鍵字并查看結(jié)果
});

6.3 自定義搜索結(jié)果

如果不想使用 JS API 的結(jié)果面板，panel 可以缺省或者賦值 false，然后在 search()的回調(diào)中處理自己的邏輯，自定義搜索教程前往 輸入提示與 POI 搜索。

//在回調(diào)函數(shù)中使用插件功能
placeSearch.search("北京大學(xué)", function (status, result) {
  //查詢成功時(shí)，result 即對(duì)應(yīng)匹配的 POI 信息
});

7. 路線規(guī)劃

AMap.Driving 駕車路線規(guī)劃插件。JS API 的路線規(guī)劃種類有：駕車 AMap.Driving、公交 AMap.Transfer、步行 AMap.Walking、騎乘 AMap.Riding 和貨車 AMap.TruckDriving 等。

7.1 確認(rèn)規(guī)劃的起點(diǎn)和終點(diǎn)信息

// 使用地名確認(rèn)起終點(diǎn)
const points = [
  { keyword: "北京市地震局（公交站）", city: "北京" }, //起始點(diǎn)坐標(biāo)
  { keyword: "亦莊文化園（地鐵站）", city: "北京" }, //終點(diǎn)坐標(biāo)
];
// 使用經(jīng)緯度確認(rèn)起終點(diǎn)
const startLngLat = [116.379028, 39.865042]; //起始點(diǎn)坐標(biāo)
const endLngLat = [116.427281, 39.903719]; //終點(diǎn)坐標(biāo)

7.2 引入和創(chuàng)建駕車規(guī)劃插件，獲取起終點(diǎn)規(guī)劃線路

// 使用地點(diǎn)名稱規(guī)劃獲取規(guī)劃路線
// 引入和創(chuàng)建駕車規(guī)劃插件
AMap.plugin(["AMap.Driving"], function () {
  const driving = new AMap.Driving({
    map: map,
    panel: "my-panel",
  });
  //獲取起終點(diǎn)規(guī)劃線路
  driving.search(points, function (status, result) {
    if (status === "complete") {
      //status：complete 表示查詢成功，no_data 為查詢無(wú)結(jié)果，error 代表查詢錯(cuò)誤
      //查詢成功時(shí)，result 即為對(duì)應(yīng)的駕車導(dǎo)航信息
      console.log(result);
    } else {
      console.log("獲取駕車數(shù)據(jù)失?。? + result);
    }
  });
});
// 使用經(jīng)緯度規(guī)劃獲取規(guī)劃路線
// 引入和創(chuàng)建駕車規(guī)劃插件
AMap.plugin(["AMap.Driving"], function () {
  const driving = new AMap.Driving({
    map: map,
    panel: "my-panel",
  });
  //獲取起終點(diǎn)規(guī)劃線路
  driving.search(startLngLat, endLngLat, function (status, result) {
    if (status === "complete") {
      //status：complete 表示查詢成功，no_data 為查詢無(wú)結(jié)果，error 代表查詢錯(cuò)誤
      //查詢成功時(shí)，result 即為對(duì)應(yīng)的駕車導(dǎo)航信息
      console.log(result);
    } else {
      console.log("獲取駕車數(shù)據(jù)失?。? + result);
    }
  });
});

8. 地圖生命周期

8.1 創(chuàng)建地圖

var map = new AMap.Map("container", {
  zoom: 10, //地圖級(jí)別
  center: [116.397428, 39.90923], //地圖中心點(diǎn)
  layers: [new AMap.TileLayer.Satellite()], //設(shè)置圖層,可設(shè)置成包含一個(gè)或多個(gè)圖層的數(shù)組
  mapStyle: "amap://styles/whitesmoke", //設(shè)置地圖的顯示樣式
  viewMode: "2D", //設(shè)置地圖模式
});

8.2 地圖加載完成

map.on("complete", function () {
  //地圖圖塊加載完成后觸發(fā)
});

8.3 地圖運(yùn)行階段

var map = new AMap.Map("container"); //初始化地圖
//在運(yùn)行階段添加點(diǎn)標(biāo)記
const marker = new AMap.Marker({
  position: new AMap.LngLat(116.39, 39.9),
});
//將創(chuàng)建的點(diǎn)標(biāo)記添加到已有的地圖實(shí)例：
map.add(marker);
//在運(yùn)行階段監(jiān)聽地圖的點(diǎn)擊事件
const clickHandler = function (e) {
  console.log(
    "您在[ " +
      e.lnglat.getLng() +
      "," +
      e.lnglat.getLat() +
      " ]的位置點(diǎn)擊了地圖！"
  );
};
map.on("click", clickHandler);

8.4 銷毀地圖對(duì)象

//解綁地圖的點(diǎn)擊事件
map.off("click", clickHandler);
//銷毀地圖，并清空地圖容器
map.destroy();
//地圖對(duì)象賦值為null
map = null;
//清除地圖容器的 DOM 元素
document.getElementById("container").remove(); //"container" 為指定 DOM 元素的id

到此這篇關(guān)于在 vue3 中使用高德地圖的文章就介紹到這了,更多相關(guān)vue3 使用高德地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論