vue高德地圖JSAPI實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例

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

需求：根據(jù)后臺接口返回的部分?jǐn)?shù)據(jù)，這里僅做展示，可參考使用?？梢约尤霃棿包c(diǎn)擊的時候。

實(shí)現(xiàn)效果：

JSAPI的加載

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

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

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

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

使用JSAPILoader(推薦)

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

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

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

JSAPIkey和安全密鑰的使用

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

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

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

實(shí)現(xiàn)代碼

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端開發(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:[]//需要加載的AMapUIui插件

.then(AMap={

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

resizeEnable:true,

zoom:4,

center:[116.397428,39.90923]//中心點(diǎn)坐標(biāo)

//地圖控件

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

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

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

this.handlePoint();

reslove();

.catch(e={

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

reject(e);

},

實(shí)現(xiàn)海量點(diǎn)方法：

注意事項(xiàng)：

//數(shù)據(jù)處理格式constmapData=[經(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;

varpointSimplifierIns=newPointSimplifier({

map:this.map,//所屬的地圖實(shí)例

getPosition:(item)={

if(!item){

returnnull;

varparts=item.split(",");

//返回經(jīng)緯度

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

//returnitem;

getHoverTitle:(dataItem,idx)={

returnidx+":"+dataItem;

renderOptions:{

//點(diǎn)的樣式

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ù)

//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