vue3+ts使用高德地图显示上海区域，添加marker并且能点击marker

最新推荐文章于 2024-04-19 01:59:38 发布

VIP文章努力站桩的奶酪呦

最新推荐文章于 2024-04-19 01:59:38 发布

阅读量798

点赞数

文章标签： typescript Powered by 金山文档

本文链接：https://blog.csdn.net/liuli0927/article/details/129060395

版权

首先要下载

npm i @amap/amap-jsapi-loader --save

圈出的区域要有数据

<template>
<!-- 实现将上海区域圈起来 -->
    <div id="container"></div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader';
  //这里是数据
  import { shanghai, suzhou } from './map';
  const map = ref<any>(null);
  const mapZoom = ref<number>(9);
  //初始化地图
  AMapLoader.load({

    key: 'key', //填入你申请的key
    version: '1.4.15', //高德版本 可以不填
    plugins: [ //需要的地图插件
      "AMap.ToolBar",
      "AMap.Driving",
      "AMap.PolygonEditor",
      "AMap.PlaceSearch",
    ],
  }).then(v => {
      //对地图进行赋值 “container”为div盒子的id
      //<div class="map" id="container&#