手把手教你搭建个人舆图服务器（高德离线部署解决方案）：获取舆图瓦片数据 - ToB企服应用市场:ToB评测及商务社交产业平台

import "../../public/amap/AMap3.js"

复制代码

<div id='map-container' style="width: 100%; height: 600px;">

复制代码

<template> <div id='map-container' style="width: 100%; height: 600px;">
</div> <div> <button @click="handleMarker()">标志</button> <button @click="handlePolyline()">折线</button> <button @click="handleTextmark()">文本标志</button> </div></template><script>import "../../public/amap/AMap3.js"
export default { data() { return { mapObj: null, } }, methods: { initMap() { // 自定义舆图层 const base_url = "/" const layers = [new AMap.TileLayer({ getTileUrl: function (x, y, z) { return `${base_url}MAP_zxy/${z}/${x}/${y}.png`; }, opacity: 1, zIndex: 99, })] this.mapObj = new AMap.Map('map-container', { // 设置舆图容器id resizeEnable: true, zoom: 15, rotateEnable: true, pitchEnable: true, center: [113.098980, 23.361340], defaultCursor: 'pointer', showLabel: true, //是否表现笔墨标注 layers: layers, }) }, handleMarker() { const marker = new AMap.Marker({ position: [113.098980, 23.361340], //位置 }); this.mapObj.add(marker); //添加到舆图 }, handlePolyline() { const lineArr = [ [113.098980, 23.361340], [113.092980, 23.361340], [113.092980, 23.366340] ]; const polyline = new AMap.Polyline({ path: lineArr, //设置线覆盖物路径 strokeColor: "red", //线颜色 strokeWeight: 5, //线宽 strokeStyle: "solid", //线样式 }); this.mapObj.add(polyline); }, handleTextmark() { // 创建纯文本标志 let text = new AMap.Text({ text:'粤电花都燃气电厂', anchor:'center', // 设置文本标志锚点 draggable:true, cursor:'pointer', angle:10, style:{ 'padding': '.75rem 1.25rem', 'margin-bottom': '1rem', 'border-radius': '.25rem', 'background-color': 'white', 'width': '10rem', 'border-width': 0, 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)', 'text-align': 'center', 'font-size': '20px', 'color': 'blue' }, position: [113.098980, 23.362240] }); text.setMap(this.mapObj); let text1 = new AMap.Text({ text:'双一橡胶', anchor:'center', // 设置文本标志锚点 draggable:true, cursor:'pointer', angle:10, style:{ 'padding': '.75rem 1.25rem', 'margin-bottom': '1rem', 'border-radius': '.25rem', 'background-color': 'white', 'width': '10rem', 'border-width': 0, 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)', 'text-align': 'center', 'font-size': '20px', 'color': 'blue' }, position: [113.092980, 23.366340] }); text1.setMap(this.mapObj) }, }, mounted() { this.initMap() }}</script><style>@media (min-width: 1024px) { .about { min-height: 100vh; display: flex; align-items: center; }}</style>

复制代码