【Vue】集成高德地图

这篇具有很好参考价值的文章主要介绍了【Vue】集成高德地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue 集成高德地图

步骤

注册成为高德开发者

获取申请的安全密钥、申请好的Web端开发者Key

【Vue】集成高德地图,Vue,vue.js,java,spring boot,后端

创建Vue 工程

【Vue】集成高德地图,Vue,vue.js,java,spring boot,后端

创建地图组件

【Vue】集成高德地图,Vue,vue.js,java,spring boot,后端

引入地图组件

【Vue】集成高德地图,Vue,vue.js,java,spring boot,后端

高德地图开发平台地址

https://lbs.amap.com/

官方示例地址

https://lbs.amap.com/demo/list/js-api-v2

【Vue】集成高德地图,Vue,vue.js,java,spring boot,后端

示例

首先创建一个vue工程

安装

npm install @amap/amap-jsapi-loader

创建地图组件

将代码中的xx 替换成你的安全密钥和Web端开发者Key

<template>
  <div  id="AMapContainer" style="width: 100%; height: 100vh"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: 'xx' // '「申请的安全密钥」',
}
export default {
  name: "GDMap",
  return:{
    data(){
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "xx", // 申请好的Web端开发者Key,首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
          'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 获取到作为地图容器的DOM元素,创建地图实例
        this.map = new AMap.Map("AMapContainer", { //设置地图容器id
          resizeEnable: true,
          viewMode: "3D", // 使用3D视图
          zoomEnable: true, // 地图是否可缩放,默认值为true
          dragEnable: true, // 地图是否可通过鼠标拖拽平移,默认为true
          doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图,默认为true
          zoom: 17, //初始化地图级别
          showBuildingBlock:true, // 是否出现建筑模型
          pitch:55,    // 视角控制
        })
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped>
#AMapContainer {
  width: 100%;
  height: 100vh;
}
</style>

引入地图组件

<template>
  <div>
    <g-d-map></g-d-map>
  </div>
</template>

<script>
import GDMap from '../components/GDMap'
export default {
  name: "HomeIndex",
  components:{
    GDMap
  },
  data(){
    return {
    }
  },
  methods:{

  }
}
</script>

<style scoped>

</style>

测试预览

【Vue】集成高德地图,Vue,vue.js,java,spring boot,后端文章来源地址https://www.toymoban.com/news/detail-681442.html

到了这里,关于【Vue】集成高德地图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 宿舍管理系统的设计与实现:基于Spring Boot、Java、Vue.js和MySQL的完整解决方案

    ✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 | SpringBoot/SSM Python实战项目 | Django 微信小

    2024年01月17日
    浏览(53)
  • Spring Boot后端+Vue前端:打造高效二手车交易系统

    作者介绍: ✌️大厂全栈码农|毕设实战开发,专注于大学生项目实战开发、讲解和毕业答疑辅导。 🍅 获取源码联系方式请查看文末 🍅  推荐订阅精彩专栏 👇🏻 避免错过下次更新 Springboot项目精选实战案例 更多项目: CSDN主页YAML墨韵 学如逆水行舟,不进则退。学习如赶

    2024年04月28日
    浏览(63)
  • vue引入高德地图

    1.首先index.html引入   2.引入并插入坐标点

    2024年02月13日
    浏览(51)
  • Spring Boot后端与Vue前端融合:构建高效旅游管理系统

    作者介绍: ✌️大厂全栈码农|毕设实战开发,专注于大学生项目实战开发、讲解和毕业答疑辅导。 🍅 获取源码联系方式请查看文末 🍅  推荐订阅精彩专栏 👇🏻 避免错过下次更新 Springboot项目精选实战案例 更多项目: CSDN主页YAML墨韵 学如逆水行舟,不进则退。学习如赶

    2024年04月28日
    浏览(58)
  • Vue 引入高德地图:实现地图展示与交互

    本文将介绍如何在Vue项目中引入高德地图,以及如何实现地图的展示和交互功能。我们将从安装依赖开始,然后配置高德地图的密钥和相关插件,最后演示如何在Vue组件中使用地图组件和实现基本的交互功能。通过本文的指导,您将能够轻松地在Vue项目中集成高德地图,实现

    2024年02月08日
    浏览(50)
  • 在vue中引入高德地图

    既然要用到高德地图首先要申请成为高德地图开发者,并申请使用高德地图的key 这两点在这篇文章就不过多赘述,有需要的小伙伴可以查查资料,或者去高德地图api官网都有很详细的介绍。高德地图官网 简单提一下申请秘钥流程(web端) 控制台–应用管理–我的应用 好啦!

    2024年02月04日
    浏览(87)
  • vue项目中使用高德地图

    最近做的项目中有个地图选择的功能,如下图所示: 所以在此记录下使用方法,望各位大神指导 我的应用 | 高德控制台 第一步: 去高德官网去创建一个属于自己的地图应用 (得到key和秘钥) 我的应用 | 高德控制台  这是添加的方式: 准备-入门-教程-地图 JS API | 高德地图

    2024年02月07日
    浏览(49)
  • vue3高德地图点击标点

      1.首先如果没有key的话需要在高德开发平台申请key。 2.安装 3.容器: 4.容器样式: 5.在组件中引入所需的 API。 6.创建一个 Marker 实例。 7.定义样式:  显示地图层级与中心点信息: 获取经纬度坐标:   整体代码:  

    2024年02月11日
    浏览(52)
  • vue中引入并使用高德地图

    1.进入高德开放平台 2.点击: 开发支持---------地图JS AP---------JSAPI的加载 3.选择 按NPM方式使用loader 4.定义一个有宽高的div,书写以下代码: 先放效果图,左下角是可供选择的鼠标样式 1.点击示例中心---------地图属性-------下划找到 设置鼠标样式 2.点进去后有示例代码 3.这是之前

    2024年02月03日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包