当前位置：首页 > wzjs >正文

做个网站要多少钱seo网站优化收藏

wzjs 2025/8/15 8:08:49

做个网站要多少钱,seo网站优化收藏,当地人做导游的旅游网站,怎么才能有自己的网站1、引入官方文档天地图采用CDN方式引入，在引入之后可以直接使用（需要申请密钥，使用大写的T作为命名空间） <script src"http://api.tianditu.gov.cn/api?v4.0&tk您的密钥" type"text/javascript"&…

在这里插入图片描述

1、引入

官方文档
天地图采用CDN方式引入，在引入之后可以直接使用（需要申请密钥，使用大写的T作为命名空间）

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>

2、使用

2.1、初始化

注意天地图使用的是CGCS2000坐标系，与其他地图混用时主要要进行转换

首先要准备一个定宽定高的容器

<div id="chartMap" style="height: 100%;width: 100%;"></div>

获取节点并初始化

// 地图实例
let TDMap = null, TDMapMarkers = null, TDMapMarker = {}, TDMapInfoWindow = {}, TDMapOverLay = {};
// 多边形多环关联表
const ManyTDMapOverLay = new Map();
// 初始化地图对象
if(!TDMap) TDMap = new T.Map("chartMap");

设置中心点以及缩放级

// 设置显示地图的中心点和级别
TDMap.centerAndZoom(new T.LngLat(lng, lat), 12));

3、销毁天地图

参考

// 销毁天地图
const destructionTMap = () => {if (TMap.value) {TMap.value = null;// 直接将节点给删掉const parentEl = document.getElementById('mainMap');const cahildrenEl = document.getElementById('chartMap');if(cahildrenEl) parentEl.removeChild(cahildrenEl);// 然后再手动将节点加进来const newCahildrenEl = document.createElement("div");newCahildrenEl.id = 'chartMap'newCahildrenEl.style = 'height: 100%;width: 100%;'parentEl.appendChild(newCahildrenEl)}
}

4、加入类

官方API文档

geoJSON数据可通过接口获取，或自行下载保存到本地，自行引入，建议通过接口获取

4.1、加入多边形

参数一为多边形经纬度，参数二为配置项
new T.Polygon(points, {
color: “blue”, weight: 3, opacity: 1, fillColor: “#FFFFFF”, fillOpacity: 0.3, lineStyle: ‘dashed’
})

<script setup>import { onMounted, watch, inject, onBeforeUnmount } from 'vue';// 经纬度转换import { transformGCJ2WGS } from "@/function/lib/transformGCJ2WGS.js";// 生成uuidimport { uuid } from "@/function/lib"defineOptions({name: ''});let geoJSON = null;const props = defineProps({})const emits = defineEmits(['TMapClick']);const isIncludeSub = inject('isIncludeSub');const mapParams = inject('mapParams');// 地图实例let TDMap = null, TDMapOverLay = {};// 多边形多环关联表const ManyTDMapOverLay = new Map();async function loadGoJson() {geoJSON = await fetch(`https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`).then(res => res.json()).then(data => {return data;})setTimeout(() => {loadTMap()}, 500);}// 加载天地图async function loadTMap() {if (TDMap) destructionTMap();// 中心点，转换坐标const centerData = transformGCJ2WGS(Number(geoJSON.features[0].properties.centroid[1] || 27.9937307619152), Number(geoJSON.features[0].properties.centroid[0] || 120.69941136528779));const lat = Number(centerData.lat);const lng = Number(centerData.lon);// 初始化地图对象if(!TDMap) TDMap = new T.Map("chartMap");const center = new T.LngLat(lng, lat);// 设置显示地图的中心点和级别TDMap.centerAndZoom(center, 5);// 创建一个用于渲染地图事件的方法let drawMapFn = (points, adcode, id) => {try {// 创建面对象TDMapOverLay[id] = new T.Polygon(points, {color: "blue", weight: 3, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 0.3, lineStyle: 'dashed'})// 监听面对象移入事件，加入背景色TDMapOverLay[id].addEventListener("mouseover", _ => {ManyTDMapOverLay.get(adcode).forEach(item => {TDMapOverLay[item].setFillColor('rgb(13, 202, 230)');TDMapOverLay[item].setFillOpacity(0.6);})// event.target.setFillColor('rgb(13, 202, 230)');// event.target.setFillOpacity(0.6);});// 监听面对象移出事件，淡化背景色TDMapOverLay[id].addEventListener("mouseout", _ => {ManyTDMapOverLay.get(adcode).forEach(item => {TDMapOverLay[item].setFillColor('#FFFFFF');TDMapOverLay[item].setFillOpacity(0.3);})});// 向地图上添加叠加物TDMap.addOverLay(TDMapOverLay[id]);} catch (error) {console.log('error', error);}}// 循环遍历geoJson解析子区域geoJSON.features.forEach(geoItem => {// 分析coordinates数据若多个数组则表示有多个环，需要创建多个面对象并关联起来let coordinates = geoItem.geometry?.coordinates || [];const { adcode } = geoItem.properties;ManyTDMapOverLay.set(adcode, []);// 多环数据需要将多个面对象关联起来（通过code进行关联）if(geoItem.geometry.type === 'MultiPolygon') {coordinates.forEach((item) => {const id = uuid();ManyTDMapOverLay.get(adcode).push(id);// 多边形经纬度转换const points = item[0].map(ele => {const latLng = transformGCJ2WGS(ele[1], ele[0]);return new T.LngLat(latLng.lon, latLng.lat);});drawMapFn(points, adcode, id);})}// 单环数据直接创建面对象if(geoItem.geometry.type === 'Polygon') {const id = uuid();ManyTDMapOverLay.get(adcode).push(id);// 多边形经纬度转换const points = coordinates[0].map(item => {const latLng = transformGCJ2WGS(item[1], item[0]);return new T.LngLat(latLng.lon, latLng.lat);})drawMapFn(points, adcode, id);}})drawMapFn = null;}// 销毁天地图const destructionTMap = (addChildren = true) => {if (TDMap) {TDMap = null;// 直接将节点给删掉const parentEl = document.getElementById('mainMap');const cahildrenEl = document.getElementById('chartMap');if(cahildrenEl) parentEl.removeChild(cahildrenEl);if(!addChildren) return;// 然后再手动将节点加进来const newCahildrenEl = document.createElement("div");newCahildrenEl.id = 'chartMap'newCahildrenEl.style = 'height: 100%;width: 100%;'parentEl.appendChild(newCahildrenEl)}}onMounted(() => {loadGoJson();});onBeforeUnmount(() => {destructionTMap(false);})// 子组件暴露defineExpose({});</script><template><div id="mainMap" style="height: 100%;width: 100%;"><div id="chartMap" style="height: 100%;width: 100%;"></div></div>
</template><style lang="less" scoped></style>

4.2、加入信息窗口

先使用 const TDMapInfoWindow = new T.InfoWindow(); 构建信息窗实例
而后 TDMapInfoWindow.setLngLat(infoWinCenterLatLng); 确定位置
而后 TDMapInfoWindow.setContent(‘html节点’); 加载窗口
最后TDMap.addOverLay(TDMapInfoWindow);加载到天地图上

<script setup>import { onMounted, inject, onBeforeUnmount } from 'vue';import { transformGCJ2WGS } from "@/function/lib/transformGCJ2WGS.js";import { uuid } from "@/function/lib"defineOptions({name: ''});let geoJSON = null;const props = defineProps({})const emits = defineEmits(['TMapClick']);const isIncludeSub = inject('isIncludeSub');const mapParams = inject('mapParams');// 地图实例let TDMap = null, TDMapInfoWindow = {}, TDMapOverLay = {};// 多边形多环关联表const ManyTDMapOverLay = new Map();async function loadGoJson() {geoJSON = await fetch(`https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`).then(res => res.json()).then(data => {return data;})setTimeout(() => {loadTMap()}, 500);}// 加载天地图async function loadTMap() {if (TDMap) destructionTMap();// 中心点，转换坐标const centerData = transformGCJ2WGS(Number(geoJSON.features[0].properties.centroid[1] || 27.9937307619152), Number(geoJSON.features[0].properties.centroid[0] || 120.69941136528779));const lat = Number(centerData.lat);const lng = Number(centerData.lon);// 初始化地图对象if(!TDMap) TDMap = new T.Map("chartMap");const center = new T.LngLat(lng, lat);// 设置显示地图的中心点和级别TDMap.centerAndZoom(center, mapParams.areaCode === '100000' ? 5 : (isIncludeSub.value ? 9 : 12));// 创建一个用于渲染地图事件的方法let drawMapFn = (geoItem, points, name, adcode, id) => {try {// 创建面对象TDMapOverLay[id] = new T.Polygon(points, {color: "blue", weight: 3, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 0.3, lineStyle: 'dashed'})// 监听面对象移入事件，加入背景色以及信息窗口TDMapOverLay[id].addEventListener("mouseover", _ => {ManyTDMapOverLay.get(adcode).forEach(item => {TDMapOverLay[item].setFillColor('rgb(13, 202, 230)');TDMapOverLay[item].setFillOpacity(0.6);})const list = getTopmostVertex(name === '内蒙古自治区' ? geoItem.geometry.coordinates[0] : geoItem.geometry.coordinates[0][0]);const targetLatLng = transformGCJ2WGS(list[1], list[0]);// 信息窗口const infoWinCenterLatLng = new T.LngLat(targetLatLng.lon, targetLatLng.lat);TDMapInfoWindow[adcode] = new T.InfoWindow();TDMapInfoWindow[adcode].setLngLat(infoWinCenterLatLng);TDMapInfoWindow[adcode].setContent('<div style="color: #000;text-align: left;font-size: 18px;line-height: 10px;">'+ '<p style="font-weight: bold;line-height: 10px;">' + name + '</p>');TDMap.addOverLay(TDMapInfoWindow[adcode]);});// 监听面对象移出事件，淡化背景色以及关闭信息窗口TDMapOverLay[id].addEventListener("mouseout", _ => {ManyTDMapOverLay.get(adcode).forEach(item => {TDMapOverLay[item].setFillColor('#FFFFFF');TDMapOverLay[item].setFillOpacity(0.3);})TDMapInfoWindow[adcode].closeInfoWindow();});// 向地图上添加叠加物TDMap.addOverLay(TDMapOverLay[id]);} catch (error) {console.log('error', error);}}// 循环遍历geoJson解析子区域geoJSON.features.forEach(geoItem => {// 分析coordinates数据若多个数组则表示有多个环，需要创建多个面对象并关联起来let coordinates = geoItem.geometry?.coordinates || [];const {name, adcode} = geoItem.properties;ManyTDMapOverLay.set(adcode, []);// 多环数据需要将多个面对象关联起来（通过code进行关联）if(geoItem.geometry.type === 'MultiPolygon') {coordinates.forEach((item) => {const id = uuid();ManyTDMapOverLay.get(adcode).push(id);// 多边形经纬度转换const points = item[0].map(ele => {const latLng = transformGCJ2WGS(ele[1], ele[0]);return new T.LngLat(latLng.lon, latLng.lat);});drawMapFn(geoItem, points, name, adcode, id);})}// 单环数据直接创建面对象if(geoItem.geometry.type === 'Polygon') {const id = uuid();ManyTDMapOverLay.get(adcode).push(id);// 多边形经纬度转换const points = coordinates[0].map(item => {const latLng = transformGCJ2WGS(item[1], item[0]);return new T.LngLat(latLng.lon, latLng.lat);})drawMapFn(geoItem, points, name, adcode, id);}})drawMapFn = null;}// 计算顶点坐标function getTopmostVertex(coordinates) {let topmostVertex = null;let maxLatitude = -Infinity; // 初始化最大纬度为负无穷大// 遍历坐标数组来找到最大纬度值for (const vertex of coordinates) {const latitude = vertex[1]; // 纬度是坐标数组的第二个元素if (latitude > maxLatitude) {maxLatitude = latitude;topmostVertex = vertex;}}return topmostVertex;}// 销毁天地图const destructionTMap = (addChildren = true) => {if (TDMap) {TDMap = null;// 直接将节点给删掉const parentEl = document.getElementById('mainMap');const cahildrenEl = document.getElementById('chartMap');if(cahildrenEl) parentEl.removeChild(cahildrenEl);if(!addChildren) return;// 然后再手动将节点加进来const newCahildrenEl = document.createElement("div");newCahildrenEl.id = 'chartMap'newCahildrenEl.style = 'height: 100%;width: 100%;'parentEl.appendChild(newCahildrenEl)}}onMounted(() => {loadGoJson();});onBeforeUnmount(() => {destructionTMap(false);})// 子组件暴露defineExpose({});</script><template><div id="mainMap" style="height: 100%;width: 100%;"><div id="chartMap" style="height: 100%;width: 100%;"></div></div>
</template><style lang="less" scoped></style>