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

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

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

實現(xiàn)效果：

JSAPI 的加載

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

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

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

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

使用 JSAPI Loader (推薦)

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

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

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

JSAPI key和安全密鑰的使用

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

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

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

實現(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 的版本，缺省時默認為 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] //中心點坐標
            });
 
            //地圖控件
            this.map.addControl(new AMap.Scale());
            this.map.addControl(new AMap.ToolBar());
            this.map.setZoom(14); //設置縮放大小
 
            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("當前環(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)",
            },
            //鼠標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ù)進行處理
          // 數(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);
        });
      });
}

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

您可能感興趣的文章: