this.map = new maptalks.Map("mapDiv", {center: [this.coordinate[0].x, this.coordinate[0].y],zoom: 8.8,minZoom: 3,maxZoom: 16,attribution: false, //隱藏logspatialReference: "EPSG:3857",baseLayer: new maptalks.TileLayer("base", {urlTemplate:"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg",}),// layers: [// new maptalks.VectorLayer('A', [new maptalks.Marker([119.04, 37.18])]) //紅色位置圖標// ] }); //圖標圖層添加到這張地圖上 this.markerLayer = new maptalks.VectorLayer('vector').addTo(this.map); this.toolLayer = new maptalks.VectorLayer('mapvector'); // 圖標以及點擊事件 this.coordinate.forEach((item) => {let button = "assets/img/bigscreem/button.png";var marker = new maptalks.Marker([item.x, item.y], {symbol: {markerFile: require(`@/${button}`),markerWidth: 40,markerHeight: 49,markerDx: 0,markerDy: 0,// markerOpacity: 0.1,markerFill: '#3EEAC6', //內部填充色// markerLineColor: 'red', //邊框顏色'textName': item.name,'textFill': '#fff','textHorizontalAlignment': 'bottom','textSize': 14,textDx: 10}})//將圖標添加到圖標圖層marker.addTo(this.markerLayer)marker.on('click', function () {that.tab = item.name;}) });

總結

以上是生活随笔為你收集整理的maptalk地图以及自定义标点的引入的全部內容，希望文章能夠幫你解決所遇到的問題。

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