基于Vue的高德地图组件

本文介绍如何在Vue项目中创建一个高德地图组件,通过JavaScript API进行地图的初始化、定位、标记等功能的实现,详细讲解了Vue与高德地图的结合使用,帮助开发者在前端开发中更好地集成地图功能。
摘要由CSDN通过智能技术生成
<template>
  <div class="tmap">
    <div class="btn">
      <button @click="change2D">2D视图</button>
      <button @click="change3D">3D视图</button>
      <button @click="moveToLocal">平移</button>
      <button @click="createInfoWindows">开启信息窗口</button>
      <button @click="destroyedInfoWindows">关闭信息窗口</button>
      <div>
        <input id="tipinput" type="text" placeholder="请输入地名" v-model="keywords" />
        <button @click="searchEvent">搜索</button>
      </div>
    </div>
    <div class="map" id="amap-container" ref="tmap" style="width:100%;height:400px"></div>
  </div>
</template>

<script>
export default {
   
  name: "TMap",
  data() {
   
    return {
   
      map: {
   },
      center: {
   },
      AMap: {
   },
      marker: null,
      keywords: "",
      infoWindow: {
   },
      placeSearch: {
   },
      hotspotoverEvent: {
   },
      auto: {
   }
    };
  },
  props: {
   
    aMapKey: {
   
      default: "85c467ada7b08d4b909e233d37e2d7bb",
      type: String
    }
  },
  mounted() {
   
    this.loadScript(() => {
   
      this.initTMap();
    });
  },
  methods: {
   
    // 初始化地图
    // 这里参数有默认值
    // 如果不传按照默认值 渲染
    initTMap(
      ViewMode = "3D",//3d模式 
      resizeEnable = true,
      rotateEnable = true,
      pitchEnable = true,
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值