hexo搭建及部署

一、基础

1.1 使用前提

• 注册高德开发者账户：注册 + 认证 + 登录
• 创建应用并获取key
  • 创建：应用管理 -> 我的应用 -> 创建新应用
  • 获取key和安全密钥：新增key并提交

1.2 JS API结合Vue使用

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

1.3 插件的使用（搜索插件的使用）

onMounted(() => {
  // 配置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  
  // 加载高德地图API（添加了搜索插件）
  AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0",
    plugins: ["AMap.PlaceSearch"]
  })
    .then((AMap) => {
      // 创建地图实例
      map = new AMap.Map("container", {
        viewMode: "3D",
        zoom: 11,
        center: [116.397428, 39.90923]
      });

      // 初始化地点搜索 - 使用正确的事件监听方式
      placeSearch = new AMap.PlaceSearch({
        map: map,
        pageSize: 8,
        city: '全国'
      });
      
      // 正确的事件监听 - 使用 on 方法
      placeSearch.on('complete', (data) => {
        searchError.value = '';
        if (data.poiList?.pois) {
          searchResults.value = data.poiList.pois.map(poi => ({
            name: poi.name,
            address: poi.address,
            location: [poi.location.lng, poi.location.lat]
          }));
        } else {
          searchResults.value = [];
        }
      });
      
      // 错误事件监听
      placeSearch.on('error', (error) => {
        console.error('搜索失败:', error);
        searchError.value = error.info || '搜索过程中发生错误';
        searchResults.value = [];
      });
    })
    .catch(error => {
      console.error('地图加载失败:', error);
      searchError.value = '地图初始化失败: ' + error.message;
    });
});