快捷導(dǎo)航

vue高德地圖JS API實現(xiàn)海量點標(biāo)記示例

更新時間：2022年08月22日 08:17:58 作者：船長在船上

本文主要介紹了vue高德地圖JS API實現(xiàn)海量點標(biāo)記示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

實現(xiàn)效果：

JSAPI 的加載

JS API 2.0 版本提供了兩種方案引入地圖 JSAPI：

1. 使用官網(wǎng)提供的 JSAPI Loader 進(jìn)行加載；

2. 以常規(guī) JavaScript 腳本的方式加載；

注意：為避免地圖數(shù)據(jù)協(xié)議和前端資源不匹配導(dǎo)致頁面運行報錯，只允許在線加載 JSAPI，禁止進(jìn)行本地轉(zhuǎn)存、與其它代碼混合打包等用法。

使用 JSAPI Loader (推薦)

JSAPI Loader是我們提供的 API 加載器，可幫助開發(fā)者快速定位、有效避免加載引用地圖 JSAPI 各種錯誤用法，具有以下特性：

支持以普通JS 和 npm包兩種方式使用；
有效避免錯誤異步加載導(dǎo)致的 JSAPI 資源加載不完整問題；
對于加載混用多個版本 JSAPI 的錯誤用法給予報錯處理；
對于不合法加載引用 JSAPI 給予報錯處理；
支持指定 JSAPI 版本；
支持插件加載；
允許多次執(zhí)行加載操作，網(wǎng)絡(luò)資源不會重復(fù)請求，便于大型工程模塊管理；
支持IE9以上的瀏覽器，不支持IE8以下

注意（您在2021年12月02日申請以后的key需要配合您的安全密鑰一起使用）

JSAPI key和安全密鑰的使用

JSAPI key搭配代理服務(wù)器并攜帶安全密鑰轉(zhuǎn)發(fā)（安全）

1) 引入 JSAPI 使用 Loader 之前增加代理服務(wù)器設(shè)置腳本標(biāo)簽，設(shè)置代理服務(wù)器域名或地址，將下面示例代碼中的「您的代理服務(wù)器域名或地址」替換為您的代理服務(wù)器域名或ip地址，其中_AMapService為代理請求固定前綴，不可省略或修改。

（注意您這個設(shè)置必須是在加載loader.js的腳本引入之前進(jìn)行設(shè)置，否則設(shè)置無效。）

實現(xiàn)代碼

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

安裝@amap/amap-jsapi-loader

npm install @amap/amap-jsapi-loader --save
//或者
yarn add @amap/amap-jsapi-loader --save

引入

import AMapLoader from "@amap/amap-jsapi-loader";

方法

mounted() {
    this.loadmap();
}

地圖初始化配置

loadmap() {
      return new Promise((reslove, reject) => {
        AMapLoader.load({
          key: "", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
          // version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
          plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {
            // 是否加載 AMapUI，缺省不加載
            version: "1.1", // AMapUI 缺省 1.1
            plugins: [] // 需要加載的 AMapUI ui插件
          }
        })
          .then(AMap => {
            this.map = new AMap.Map("container", {
              resizeEnable: true,
              zoom: 4,
              center: [116.397428, 39.90923] //中心點坐標(biāo)
            });
 
            //地圖控件
            this.map.addControl(new AMap.Scale());
            this.map.addControl(new AMap.ToolBar());
            this.map.setZoom(14); //設(shè)置縮放大小
 
            this.handlePoint();
 
            reslove();
          })
          .catch(e => {
            console.log(e, "高德地圖加載失敗");
            reject(e);
          });
      });
    },

實現(xiàn)海量點方法：

注意事項：

// 數(shù)據(jù)處理格式 const mapData =['經(jīng)度1,緯度1','經(jīng)度2,緯度2']

handlePoint() {
      AMapUI.load(["ui/misc/PointSimplifier"], (PointSimplifier,$) =>{
        if (!PointSimplifier.supportCanvas) {
          alert("當(dāng)前環(huán)境不支持 Canvas！");
          return;
        }
 
        var pointSimplifierIns = new PointSimplifier({
          map: this.map, //所屬的地圖實例
 
          getPosition: (item) =>{
            if (!item) {
              return null;
            }
 
            var parts = item.split(",");
            //返回經(jīng)緯度
            return [parseFloat(parts[0]), parseFloat(parts[1])];
            // return item;
          },
          getHoverTitle: (dataItem, idx) =>{
            return idx + ": " + dataItem;
          },
          renderOptions: {
            //點的樣式
            pointStyle: {
              content:"custom_path",
              width: 6,
              height: 6,
              fillStyle: "rgba(153, 0, 153, 1)",
            },
            //鼠標(biāo)hover時的title信息
            hoverTitleStyle: {
              position: "top"
            }
          }
        });
 
        window.pointSimplifierIns = pointSimplifierIns;
 
        this.$http.post("后端接口",{
          //傳遞的參數(shù)配置
        }).then((res)=>{
          // 測試數(shù)據(jù)
          // const mapData =[
            // '114.29816166666667,30.57257', 
            // '114.28119666666667,30.552911666666667', 
            // '114.3028,30.59048333333333', 
            // '114.29160666666667,30.556718333333333', 
            // '114.2914,30.56986', 
            // '114.28456,30.553633333333334', 
            // '114.28102666666666,30.558086666666668', 
            // '114.30773333333333,30.59782', 
            // '114.29436,30.56962', 
            // '114.28113333333333,30.558556666666668', 
            // '114.29082666666666,30.559493333333332', 
            // '114.28120333333334,30.558518333333332', 
            // '114.28676,30.567103333333332', 
            // '114.28902666666667,30.56107', 
            // '114.28892,30.55321', 
            // '114.28824666666667,30.552106666666667', 
            // '114.28989333333334,30.571036666666668', 
            // '114.28078666666667,30.567476666666668', 
            // '114.29738333333333,30.58175333333333', 
            // '114.30185333333333,30.58015333333333', 
            // '114.28097333333334,30.558096666666668', 
            // '114.29002666666666,30.571', 
            // '114.29001333333333,30.55475', 
            // '114.30334666666667,30.59148', 
            // '114.28780833333333,30.551283333333334', 
            // '114.30313333333334,30.59095333333333', 
            // '114.29437166666666,30.586803333333332', 
            // '114.28254333333334,30.548951666666667'
            // ]
 
          // 接口獲取到的數(shù)進(jìn)行處理
          // 數(shù)據(jù)格式 const mapData =['經(jīng)度1,緯度1','經(jīng)度2,緯度2']
          let mapData= [];
          res.data.data.forEach(item=>{
            mapData.push(item.longitude+","+item.latitude)
          });
          console.log(mapData,"push數(shù)據(jù)");
          
        
          pointSimplifierIns.setData(mapData);
        }).catch();
        //  pointMouseover pointMouseout
        pointSimplifierIns.on("pointClick",(e, record)=> {
            // console.log(e.type, record);
            console.log(record.data);
        });
      });
}

到此這篇關(guān)于vue高德地圖JS API實現(xiàn)海量點標(biāo)記示例的文章就介紹到這了,更多相關(guān)vue 高德地圖海量點標(biāo)記內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: