vue加載esmap室內地圖

使用 vue 開發室內地圖與傳統開發，有些許不同

下載vue-cli2/vue-cli3版地圖示例

SDK目前不支持用require js引用，只能使用引用

Tips:使用 vue -V查看你的vue-cli版本

Tips:請一定要先下載例子來測試地圖，此開發說明不包含配置package.json里面的配置，請檢查

Vue-cli3加載地圖

vue-cli3沒有 static 文件夾，而使用 public 文件夾代替。

其余操作步驟同vue-cli2，詳見如下

Vue-cli2加載地圖步驟

第一步:把esmap.min.js文件、地圖相應的圖標、地圖文件、主題文件放在根目錄 /static 文件夾下。

地圖和樣式全部不能放置到dist/static/esmap/打包后的文件夾下，要放到根目錄/static/esmap/ 文件夾下。

第二步:在 index.html 文件下引入esmap sdk

第三步:創建一個單獨的地圖容器組件

這里命名為 MapContainer.vue ，并創建一個id為map-container的容器

第四步:組件掛載完成后初始化地圖

組件mounted時，初始化地圖

map一定要設置為全局對象，window.map =這樣來賦值初始化，不然其它函數報map未定義.

export default {

name: "MapContainer",

mounted() {

window.map = new esmap.ESMap({

container: document.getElementById("map-container"),

//如果地圖、主題文件放在static目錄下，請使用static路徑

mapDataSrc: "/esmap/data",

mapThemeSrc: "/esmap/data/theme"

// themeID: defaultOpt.themeID,

// token: 'escope'

});

map.openMapById(10001);

var ctlOpt = new esmap.ESControlOptions({

position: esmap.ESControlPositon.RIGHT_TOP,

//注意：imgURL參數是static目錄下圖片的路徑

imgURL: "static/esmap/resource/style/wedgets/img/"

});

map.on("loadComplete", function() {

//創建樓層控件

var floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);

});

}

};

大功告成！

總結

以上是生活随笔為你收集整理的js室内地图开发_vue加载esmap室内地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。