第vue高德地圖JSAPI實現海量點標記示例目錄實現效果：JSAPI的加載使用JSAPILoader(推薦)實現代碼官方文檔：海量點標記-覆蓋物-教程-地圖JSAPI|高德地圖API

需求：根據后臺接口返回的部分數據，這里僅做展示，可參考使用。可以加入彈窗點擊的時候。

實現效果：

JSAPI的加載

JSAPI2.0版本提供了兩種方案引入地圖JSAPI：

1.使用官網提供的JSAPILoader進行加載；

2.以常規JavaScript腳本的方式加載；

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

使用JSAPILoader(推薦)

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

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

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

JSAPIkey和安全密鑰的使用

JSAPIkey搭配代理服務器并攜帶安全密鑰轉發（安全）

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

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

實現代碼

template

div

divid="container"/div

/div

/template

安裝@amap/amap-jsapi-loader

npminstall@amap/amap-jsapi-loader--save

yarnadd@amap/amap-jsapi-loader--save

引入

importAMapLoaderfrom"@amap/amap-jsapi-loader";

方法

mounted(){

this.loadmap();

}

地圖初始化配置

loadmap(){

returnnewPromise((reslove,reject)={

AMapLoader.load({

key:"",//申請好的Web端開發者Key，首次調用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:[]//需要加載的AMapUIui插件

.then(AMap={

this.map=newAMap.Map("container",{

resizeEnable:true,

zoom:4,

center:[116.397428,39.90923]//中心點坐標

//地圖控件

this.map.addControl(newAMap.Scale());

this.map.addControl(newAMap.ToolBar());

this.map.setZoom(14);//設置縮放大小

this.handlePoint();

reslove();

.catch(e={

console.log(e,"高德地圖加載失敗");

reject(e);

},

實現海量點方法：

注意事項：

//數據處理格式constmapData=[經度1,緯度1,經度2,緯度2]

handlePoint(){

AMapUI.load(["ui/misc/PointSimplifier"],(PointSimplifier,$)={

if(!PointSimplifier.supportCanvas){

alert("當前環境不支持Canvas！");

return;

varpointSimplifierIns=newPointSimplifier({

map:this.map,//所屬的地圖實例

getPosition:(item)={

if(!item){

returnnull;

varparts=item.split(",");

//返回經緯度

return[parseFloat(parts[0]),parseFloat(parts[1])];

//returnitem;

getHoverTitle:(dataItem,idx)={

returnidx+":"+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("后端接口",{

//傳遞的參數配置

}).then((res)={

//測試數據

//constmapData=[

//'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.5489516666666