首页 > 其他分享 >高德地图在web端的使用

高德地图在web端的使用

时间:2024-05-30 16:54:53浏览次数:25  
标签:web 初始化 端的 地图 AMap true 高德 amap

1、高德地图开放平台申请key和安全密钥

 2、安装高德地图加载器

使用npm 安装:npm i @amap/amap-jsapi-loader --save

使用yarn 安装:yarn add @amap/amap-jsapi-loader --save

3、直接使用
<template>
  <div id="amapcontainer" style="width: 800px; height: 620px"></div>
</template>
 
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: '' // '「申请的安全密钥」',
}
export default {
  data () {
    return {
      map: null
    }
  },
  methods: {
    initAMap () {
      AMapLoader.load({
        key: "", // 申请好的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,
          zoom: this.zoom, // 地图显示的缩放级别
          viewMode: "3D", // 使用3D视图
          zoomEnable: true, // 地图是否可缩放,默认值为true
          dragEnable: true, // 地图是否可通过鼠标拖拽平移,默认为true
          doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图,默认为true
          zoom: 11, //初始化地图级别
          center: [113.370824, 23.131265], // 初始化中心点坐标 广州
          // mapStyle: "amap://styles/darkblue", // 设置颜色底层
        })
      }).catch(e => {
          console.log(e)
        })
    }
  },
  mounted () {
    //DOM初始化完成进行地图初始化
    this.initAMap()
  }
}
</script>
 
<style lang="less">
</style>

 

标签:web,初始化,端的,地图,AMap,true,高德,amap
From: https://www.cnblogs.com/le-cheng/p/18222716

相关文章

  • asp.net web api 接口控制并发研究(临时性方法)
    有一个业务场景,接口的业务逻辑非常复杂,对数据库的压力比较大,希望限制下接口的并发数量,研究了下:usingMicrosoft.AspNetCore.Mvc;usingSystem.Collections.Concurrent;usingSystem.Threading.Tasks;namespaceTestBingFa.Controllers{[ApiController][Route("[c......
  • 关于PHP的webshell免杀小结
    0X00普通的一句话木马(适用于CTF和小站)<?phpeval($_POST['a']);?>//函数的相似替换<?phpassert($_POST['a']);?> <?php@eval($_POST['110']);?>与第一个一句话木马相比多了一个"@"字符,我们发现这个字符的含义是在php语法中表示抑制错误信息即使有错误也不返回;属于不......
  • Particles.js:为Web项目增添动态粒子效果
    Particles.js:为Web项目增添动态粒子效果示例介绍Particles.js是一个轻量级的JavaScript库,用于在Web页面上创建和管理动态粒子效果。它允许开发者通过简单的配置文件实现复杂的动画效果,为网页增添视觉吸引力。粒子可以是点、线、图像等,能够根据用户交互进行动态变化,Particles.......
  • 如何隐藏 Firefox 窗口(Selenium WebDriver)?
    在Python中使用SeleniumWebDriver隐藏Firefox窗口通常涉及到配置FirefoxOptions来禁用其图形界面的显示。以下是一个详细的步骤和代码示例:1.首先,确保你已经安装了selenium库,以及geckodriver(适用于Firefox浏览器)。如果还没有安装,可以通过pip进行安装:```bashpipinstallsel......
  • Tron_CTF2024新生赛 WEB
    web业余憨憨简单复现一下,不过有两题环境挂了s1mple_php题目easy我的解答:源码:<?phphighlight_file(__FILE__);include("flag.php");$c=$_POST['c'];$v=$_GET['v'];$e=$_GET['e'];if(isset($_GET['v'])andisset($_GET['......
  • 在Linux中,如何进行Web服务器调优?
    在Linux中进行Web服务器调优主要涉及以下几个方面:选择合适的Web服务器软件、配置Web服务器设置、优化网络和硬件资源、以及确保安全性。以下是一些针对常见Web服务器软件(如Apache和Nginx)的调优步骤:1.对Apache进行调优安装Apache:sudoapt-getupdatesudoapt-getinstalla......
  • sybase12.5服务器端的安装
    sybase12.5客户端安装sybase安装教程转载https://blog.51cto.com/u_16213592/7296293sybase数据库的安装分为服务器端和客户端,本文先介绍一下服务器端的安装。1、和其他程序一样,双击setup.exe.2、出现欢迎界面,直接点击next即可。3、下面选择相应国家的协议,咱是中国人,当......
  • 在开发系统中将 .net core 6.0 Web API 部署到 IIS 无法正常工作
    发布到本地文件夹并配置到IIS进行测试的.netcore6.0Webapi无法正常工作。Thissitecan'tbereachedlocalhostrefusedtoconnect.请尝试:检查连接检查代理和防火墙ERR_CONNECTION_REFUSED已执行步骤......
  • 深入解析Web前端三大主流框架:Angular、React和Vue
    Web前端三大主流框架分别是Angular、React和Vue。下面我将为您详细介绍这三大框架的特点和使用指南。Angular核心概念:组件(Components):组件是Angular应用的构建块,每个组件由一个带有装饰器的类、一个HTML模板、一个CSS样式表组成。组件通过输入(@Input)和输出(@Output)装饰......
  • NET的应用领域:常用的客户端软件(C/S),Web网站(B/S),工控机软件。
    0201002小白理解听我解释开发语言和开发环境使用1认识.NET平台.NET的读法:DOTNET。DOT是英文”点“的含义。.NET是一种平台,我们在进行.NET平台开发的时候首先要进行.NET平台的部署。在安装VS的时候,下图a中黄色的部分都安装到了对应的操作系统之上。比如Mac,Win10等等。......