vue3 react使用高德离线地图
下载离线资源
下载地址 https://download.csdn.net/download/u010843503/90234612
2、部署私有化瓦片资源
ngxin中配置如下
server{
listen 18082;
server_name localhost;
location / {
root D:/GisMap/_alllayers;
#try_files $uri $uri/ /index.html;
#index index.html;
}
}
下载map.js
https://webapi.amap.com/maps?v=2.0&key=你的key
下载其他资源
https://vdata.amap.com/style_icon/2.0/icon-biz-big.png
https://vdata.amap.com/style_icon/2.0/icon-normal-big.png
https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png
图片放在一起
更改map.js
https://webapi.amap.com更换成自己服务器或者本地127.0.0.1也就是下图allayers的地址
https://webapi.amap.com/maps?v=2.0&key=你的key
打开后保存maps.js 放到index.html根目录下
并引入进去
<script type="text/javascript" src="./maps.js"></script>
<template>
<div id="container" style="width: 100%;height: 800px;">
</div>
</template>
<script setup lang="ts">
import { dicApi } from '/@/api/system/dic/index';
import { ref, unref, onMounted } from "vue";
let map = null;
const diApi = dicApi()
onMounted(()=>{
const wrapRef = ref<HTMLDivElement | null>(null);
let AMapSelf = (window as any).AMap;
const Icon = new AMap.Icon({
size: new AMap.Size(26, 35),
image: 'https:/XXX.com/gaode/poi-marker-default.png',
imageSize: new AMap.Size(26, 35),
});
async function initMap() {
const wrapEl = unref(wrapRef);
// console.log("进来了？",!wrapEl,unref(wrapRef))
// if (!wrapEl) return;
AMapSelf = new AMap.Map("container", {
resizeEnable: true,
zoom: 16.5, // 初始化缩放级别
viewMode: '3D',
center: [119.696603, 25.478395], // 初始化中心点
// 指定离线地图路径
layers: [
new AMap.TileLayer({
visible: true,
zIndex: 99,
opacity: 1,
getTileUrl: (a, b, c) => {
//经纬度转换成本地瓦片所在路径
let flag = '00000000';
let zz = c;
let z = 'L' + zz;
let xx = a.toString(16);
let x = 'C' + flag.substring(0, 8 - xx.length) + xx;
let yy = b.toString(16);
let y = 'R' + flag.substring(0, 8 - yy.length) + yy;
// console.log('gaodemap/' + z + '/' + y + '/' + x + '.png')
return 'https://XXX/gaode/' + z + '/' + y + '/' + x + '.png';
},
}),
],
});
AMapSelf.setDefaultCursor('pointer');
let parar={
page:1,
include:" region;road;intersection;location",
search: "location_id:;intersection_id:;name::like;region_id:;road_id:;pole_type:"
}
//获取需要marker标记点的经纬度 数组
let res = await diApi.getDicList(parar)
let data=[]
if(res.isSuccess){
data=res.returnData
}
let markData=[]
data.map((item,index)=>{
const marker = new AMap.Marker({
position: new AMap.LngLat(item.lng, item.lat), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: item.name,
offset: new AMap.Pixel(0, 0),
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
anchor:'bottom-center',
});
marker.setLabel({
direction:'right',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info' onclick='clearMarker()'>"+item.name+"</div>", //设置文本标注内容
});
marker.on('mouseover', function (e) {
// 显示这个marker点详细信息的浮窗，这个要放单独方法调用才能显示，暂时不明白为什么，直接把方法内的东西写在下面浮窗并不显示
console.log(e,"一如")
})
// 鼠标移出marker点位触发
marker.on('mouseout', function (e) {
console.log(e,"移除")// 关闭详细信息的浮窗，地图方法
})
// 鼠标点击marker触发
marker.on('click', function (e,index) {
console.log(e,"点击事件---",index) //
clearMarker()
})
markData.push(marker)
})
AMapSelf.add(markData)
// 标记点添加事件
// AMapSelf.on('click', (e)=>{
// console.log("点击了地图",e)
// })
}
initMap()
})
const clearMarker = () => {
console.log("清除了")
}
</script>
<style lang="scss">
.map-img{
width:600px;
/* height: 400px; */
height: 480px;
}
.poserMap{
position: relative;
width: 100%;
height: 100%;
left: 0;
top: 0;
.listData-item{
position: absolute;
.map_detalMark{
width: 100%;
height: 100%;
position: relative;
.margImg{
width: 50px;
}
.namert_sert{
position: absolute;
left: 52px;
top: 30px;
display: block;
min-width: 52px;
padding: 4px 6px;
border: 1px #0000FF solid;
background-color: #fff;
font-size: 12px;
}
}
}
}
</style>
效果
