高德地图简单点位+轨迹+描述

木玄客

已于 2023-03-23 10:12:47 修改

阅读量550

点赞数

文章标签： javascript vue.js 前端

于 2023-03-23 10:10:15 首次发布

本文链接：https://blog.csdn.net/linchui22/article/details/129725160

版权

这篇博客介绍了如何在Vue3的setup语法糖下，进行高德地图的简单开发，包括点位和轨迹的展示。教程以2023年3月23日为基准，提供了相关代码示例和实际效果展示。

摘要由CSDN通过智能技术生成

1、本文代码基于vue3 setup模式，简单的高德地图开发。—2023.03.23
2、以下是相关代码

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
import {
    onMounted } from '@vue/runtime-core'
import {
    reactive, ref } from 'vue'

// 对地图相关函数声明
const mapObject = ref('')
const AMapObject = ref('')
// 地图点位数组 注意数组中的点需要是数字
const pointList = reactive([
  [117.517694, 32.414674],
  [111.145623, 27.583686],
  [118.12604, 26.80916]
])
// 是否初次地图描线
const markersStatu = ref(false)

// 地图安全code设置（必须）
window._AMapSecurityConfig = {
   
  securityJsCode: 'xxxxxx'
}

// 初始化地图
AMapLoader.load({
   
  key: 'key', //设置你的key
  version: '2.0',
  plugins: [],
  AMapUI: {
   
    version: '1.1',
    plugins: []
  },
  Loca: {
   
    version: '2.0'
  }
}).then((AMap) => {
   
  // 对函数进行赋值
  AMapObject.value = AMap
  // 地图初始化
  MapInit()
})

function MapInit() {
   
  let AMap = AMapObject.value
  // 地图实例获取
  mapObject.value = new AMap.Map('mapTest', {
   
    viewMode: '2D',
    zoom: