uniapp使用高德地图的超详细步骤

2024-07-29 13:24:04

1、项目前准备

1.1、首先你需要去申请一个属于自己的高德地图key，怎么申请暂不多说需要的去官网看

有一个uniapp项目。

2、页面创建引入

新建一个uniapp的空白页使用web-view 渲染html文件页

  <web-view src="/hybrid/html/adminr.html"></web-view>

新建一个html文件，头部hede里面引入文件

  <!-- 地图 -->
  <script type="text/javascript">
   //这个地方的securityJsCode是自己的高德安全密钥，用自己的哈
  window._AMapSecurityConfig =  securityJsCode: '蛋糕吃不完我打包带走,respect' }
  </script>
  <script src="https://webapi.amap.com/loader.js"></script>
  <!-- vue -->
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script

然后在body 里面加一个div 就是我们地图的展示了

  <body>
    <div id="app">
      <div id="container"></div>
    </div>
  </body>

3、地图实现js

这个地方除了key用自己的就可以直接复制

链接: 官网直通车

      AMapLoader.load({
            "key": "蛋糕吃不完我打包带走,respect",  // 申请好的Web端开发者Key ，一样用自己的
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": ['AMap.Driving'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                "version": '1.1',   // AMapUI 版本
                "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
            },
            "Loca":{                // 是否加载 Loca， 缺省不加载
                "version": '2.0'  // Loca 版本
            },
     }).then((AMap)=>{
		var map = new AMap.Map('container',{
          center: [118.045616, 24.366646], //经纬度地图一进来显的位置
          resizeEnable: true,
		  zoom: 13 //地图显示的缩放级别
		})
     });

}

完成以上步骤我们就可以获取到一个完整的地图啦 Let me see see

然后我们要给刚刚设置经纬度添加一个标记不然不知道是哪个位置

4、地图实现单点标记

接着在刚刚的 var map = new AMap.Map下面添加标记

        var map = new AMap.Map('container',{
          center: [118.045616, 24.366646], //经纬度地图一进来显的位置
          resizeEnable: true,
		  zoom: 13 //地图显示的缩放级别
		})
       // 根据经纬度标记地理位置
        var marker = new AMap.Marker({
           position: new AMap.LngLat(118.045616, 24.366646),
           title: '默认图标' //可以自定义icon图标展示
        })
        // 将创建的点标记添加到已有的地图实例
        map.add(marker)

5、地图实现终点与起点标记

               // 构造路线导航类
                var driving = new AMap.Driving({
                    map: map,
                });
                // 根据起终点经纬度规划驾车导航路线
               driving.search(
                new AMap.LngLat(118.099481, 24.583817),
                new AMap.LngLat(118.045616, 24.366646),
                function(status, result) {
                    if (status === 'complete') {
                      console.log('绘制驾车路线完成')
                     //new AMap.InfoWindow 自定义窗体
                    } else {
                      console.log('获取驾车数据失败：' + result)
                    }
               });

最终实起点到终点路线

6、最后上代码~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <title>Document</title>
  <!-- 地圖 -->
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '868c41a6460a22634ecee3efc61abe07',
    }
  </script>
  <script src="https://webapi.amap.com/loader.js"></script>
  <!-- vus -->
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

</head>
<body>
  <div id="app">
    <div id="container"></div>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data() {
      return {}
    },
    mounted() {
      this.initr()
    },
    methods: {
      initr(){
         AMapLoader.load({
            "key": "11326b9fd9fdfa988cd15851bc55525a",  // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": ['AMap.Driving'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                "version": '1.1',   // AMapUI 版本
                "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
            },
            "Loca":{                // 是否加载 Loca， 缺省不加载
                "version": '2.0'  // Loca 版本
            },
        }).then((AMap)=>{
                var map = new AMap.Map('container',{
                  center: [118.045616, 24.366646],
                  resizeEnable: true,
								  zoom: 13 //地图显示的缩放级别
                });

                // // 根据经纬度标记地理位置
                // var marker = new AMap.Marker({
                //     position: new AMap.LngLat(118.045616, 24.366646),
                //     title: '默认图标' //可以自定义icon图标展示
                // });

                // // 将创建的点标记添加到已有的地图实例
                // map.add(marker);

                // 构造路线导航类
                var driving = new AMap.Driving({
                    map: map,
                });
                // 根据起终点经纬度规划驾车导航路线
                driving.search(new AMap.LngLat(118.099481, 24.583817), new AMap.LngLat(118.045616, 24.366646),
                function(status, result) {
                    if (status === 'complete') {
                      console.log('绘制驾车路线完成')
                      // console.log(status,'status')
                    } else {
                      console.log('获取驾车数据失败：' + result)
                    }
                });

        }).catch((e)=>{
                console.error(e);  //加载错误提示
        });
      }
    },
  })
</script>

<style scoped>
*{
  margin: 0;
}
body,html,#container {
	width: 100vw;
	height: 100vh
}

#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}

</style>
</html>

总结

到此这篇关于uniapp使用高德地图的文章就介绍到这了,更多相关uniapp使用高德地图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

UNiAPP中如何使用render.js绘制高德地图

目录什么是render.js 使用方式在uniAPP中使用render.js 绘制高德地图明确需求解决思路编写代码 vue页面使用render.js 初始化地图实现效果 render.js中的通信 1.数据的绑定 2.数据的接收 3.render.js中向vue页面发送数据总结什么是render.js renderjs是一个运行在视图层的js.它比WXS更加强大.它只支持app-vue和h5. renderjs的主要作用有2个: 大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交
uniapp开发安卓App实现高德地图路线规划导航功能的全过程

目录技术概述技术详述问题与解决问题: 解决: 参考文献总结技术概述描述这个技术是做什么的/什么情况下会使用到这个技术,学习该技术的原因,技术的难点在哪里.控制在50-100字内. uniapp的map组件中导航路线的展示.是uniapp开发app时引入地图导航的实现方式.技术难点在于实现map组件时对于属性以及函数的细节使用很容易出现一些奇怪的bug. 技术详述描述你是如何实现和使用该技术的,要求配合代码和流程图详细描述.可以再细分多个点,分开描述各个部分. 首先是在地图开发者平
uniapp使用高德地图的超详细步骤

目录 1.项目前准备 2.页面创建引入 3.地图实现js 4.地图实现单点标记 5.地图实现终点与起点标记 6.最后上代码~ 总结 1.项目前准备 1.1.首先你需要去申请一个属于自己的高德地图key,怎么申请暂不多说需要的去官网看 1.2.链接: 高德地图申请key直通车,点击前往. 有一个uniapp项目. 2.页面创建引入新建一个uniapp的空白页使用web-view 渲染html文件页 <web-view src="/hybrid/html/adminr.html"
利用Matlab绘制地图的超详细教程

目录 MappingToolbox工具箱安装局部区域陆地绘制映射贴图纹理贴图线路图绘制 usamap axesm 一些地图绘制可用简易函数 subplot tightmap 边框标签网格快速开关函数 colormap colorbar worldmap和usamap是axesm的子类,worldmap是用于生成世界地图坐标区域,usamap用于生成美国地图坐标区域,本文先在worldmap函数基础上讲解如何导入各种数据绘制各种类型图片,略提一下如何使用usamap,再讲解axesm的各种
idea配置连接数据库的超详细步骤

学习时,使用IDEA的时候,需要连接Database,连接时遇到了一些小问题,下面记录一下操作流程以及遇到的问题的解决方法. 一. 连接操作简介:介绍如何创建连接,具体连接某个数据库的操作流程. 1.1 创建连接打开idea,点击右侧的 Database 或者选择 View --> Tool Windows --> Database 点击 + 号 ,选择 Data Source ,选择数据库 (下面以MySQL为例) 选择 mysql 后弹出以下界面填上信息后,点击 Test Con
Python实战之画哆啦A梦(超详细步骤)

一.写在前面本文基于64位windows系统(鼠标右键点击桌面"此电脑"图标--属性可查看电脑系统版本).python3.x(pycharm自动安装的版本, 3.0以上).文中代码内容所使用的工具是pycharm-community-2020.1,实践中如有碰到问题,可留言提问. 前阵子有看到zh上有大神画了这个哆啦A梦的大头贴,自己也来试了一下,很简单,但长篇整段的代码对刚刚学会海龟绘图语法的初学者来说还是有一定难度,所以来做一个拆解版详细步骤讲解实现. 二.效果图言归正传,先上
Docker安装mysql超详细步骤记录

查看需要安装的镜像版本 dockerHub官网地址 1.搜索mysql 2.点击标签 3.点击Tags,查看想要的版本号在安装好docker的linux中执行命令拉取mysql最新版本 docker pull mysql 拉取mysql指定版本 docker pull mysql:5.7 拉取结束后,查看本地是否存在 docker images 运行mysql docker run -d -p 3306:3306 --name mysql -v /mysqldata/mysql/log:/v
彻底卸载VMware虚拟机的超详细步骤记录

目录一. 在卸载VMware虚拟机之前,要先把与VMware相关的服务和进程终止二. 开始卸载VMware虚拟机三. 清理VMware虚拟机在注册表中的信息和遗留在电脑的文件总结一. 在卸载VMware虚拟机之前,要先把与VMware相关的服务和进程终止 1. 在windows中按下[Windows键],搜索[服务]设置,然后打开: 2. 找到以VM打头命名的服务,然后右键停止这些服务: 3. 在windows中使用[Crtl+Shift+Esc]打开任务管理器,并找到以VM打头命名的
JDK下载与安装超详细步骤大全

目录开发环境-JDK安装 1. 下载地址 2. 安装JDK 3. 配置系统环境总结开发环境-JDK安装无论在我们开始学习Java或者入职第一天安装环境,这个你都是必备滴!下面是下载和安装JDK的教程: 1. 下载地址这里默认采用比较流行的jdk版本jdk1.8. https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 打开链接,进入该页面: 往下拉,根据你的电脑系统来进行对应的版本进行选择:
IDEA配置Maven的超详细步骤

目录一.Maven下载&环境配置 1.下载Maven 2.解压 3.配置环境变量 4.测试二.更改Maven中的设置 1.编辑settings.xml 2.配置本地仓库 3.更换默认更新源 4.添加JDK的版本三.在IDEA中配置Maven 1. 打开IDEA,新建一个空项目: 2. 打开设置找到Maven,设置Maven主路径.用户设置文件.本地仓库的地址: 3. 进到Maven导入(importing)设置,在导入程序的VM选项中添加: 4. 创建一个新模块: 四.测试 1.在pom.
windows安装MySQL到D盘的超详细步骤

目录步骤 1.下载MySQL 2.在非c盘创建文件夹 3.双击刚刚下载的内容重点来了!如何转到别的盘的重点! 端口号没必要变,如果你变了,请记住! 重要!设置自己的账户和密码.我这里账户和密码使用的都是‘root’ 配置MySQL的环境变量总结步骤 1.下载MySQL 首先,打开 MySQL 官网,找到 Community 版的下载.选择 Community 是因为该版本免费而且是一般使用的版本. MySQL 下载处的最终网址:MySQL :: Download MySQL Instal
window10下node使用管理神器NVM安装配置超详细步骤

目录前言一.什么是nvm? 二.nvm下载安装配置 1.下载 2.nvm解压安装 3.检查环境变量 4.确认安装成功 5.设置和安装node 5.1 设置淘宝镜像 5.2 安装node指定版本并使用 5.3 指定全局安装路径和缓存路径总结建议前言 node版本持续更新,一些node的新特性只有在node的较高版本中才可以使用.但是如果将node版本切换到较高版本,就会导致对现有项目的一些依赖造成环境不兼容.所以,需要一个工具对node版本进行管理,允许开发环境同时存在多个node版本,开