uniapp地图如何添加？你要的教程来喽！-6ren

uniapp地图如何添加？你要的教程来喽！

转载作者：我是一只小鸟更新时间：2023-08-31 07:39:32

地图在 app 中使用还是很广泛的，常见的应用常见有:

1、获取自己的位置，规划路线.

2、使用标记点进行标记多个位置.

3、绘制多边形，使用围墙标记位置等等.

此篇文章就以高德地图为例，以上述三个常见需求为例，教大家如何在 uniapp 中添加地图.

作为一个不管闲事的前端姑娘，我就忽略掉那些繁琐的账号申请，假设需要的信息问项目经理都要来了，如果你没有现成的信息，还需要申请，请查看:

https://lbs.amap.com/api/javascript-api-v2/prerequisites 。

去高德地图注册账号，根据官网指示获取 key。然后就正式开始前端 uniapp + 高德地图之旅啦！。

1、地图配置

在使用地图之前需要配置一下你的地图账号信息，找到项目中的 manifest.json 文件，打开 web 配置，如图:

。

此处是针对 h5 端，如果我们要打包安卓和 IOS app 需要配置对应的key信息，如图:

。

如果这些信息没有人给你提供，就需要自己去官网注册账号实名认证获取.

2、地图使用

2.1、使用标记点进行标记多个位置，具体效果图如下:

。

                          <template>
 <view class="map-con">
  <map style="width: 100%; height: 300px;"
                          
                             
   :latitude
                          
                          ="latitude"
                          
                             
   :longitude
                          
                          ="longitude"
                          
                             
   :markers
                          
                          ="covers"
                          
                            
   :scale
                          
                          ="12">
  </map>
 </view>
</template>

<script>
                          
                            
 export 
                          
                          
                            default
                          
                          
                             {
  data() {
   
                          
                          
                            return
                          
                          
                             {
    longitude: 
                          
                          '116.473115'
                          
                            ,
    latitude: 
                          
                          '39.993207'
                          
                            ,
    covers: [{
     id: 
                          
                          1
                          
                            ,
     longitude: 
                          
                          "116.474595"
                          
                            ,
     latitude: 
                          
                          "40.001321"
                          
                            ,
     iconPath: 
                          
                          '/static/images/point.png'
                          
                            ,
    },
    {
     id: 
                          
                          1
                          
                            ,
     longitude: 
                          
                          "116.274595"
                          
                            ,
     latitude: 
                          
                          "40.101321"
                          
                            ,
     iconPath: 
                          
                          '/static/images/point.png'
                          
                            ,
    },
    {
     id: 
                          
                          1
                          
                            ,
     longitude: 
                          
                          "116.374595"
                          
                            ,
     latitude: 
                          
                          "40.101321"
                          
                            ,
     iconPath: 
                          
                          '/static/images/point.png'
                          
                            ,
    },
    {
     id: 
                          
                          1
                          
                            ,
     longitude: 
                          
                          "116.374595"
                          
                            ,
     latitude: 
                          
                          "40.011321"
                          
                            ,
     width: 
                          
                          44
                          
                            ,
     height: 
                          
                          50
                          
                            ,
     iconPath:
                          
                          '/static/images/point.png'
                          
                            ,
    }
   ]
  }
 }
}

                          
                          </script>

。

注意:

看着代码很简单，运行在 h5 之后一切正常，但是运行在安卓模拟器的时候，发现自定义图标没有起作用，显示的是默认标记点.

。

iconpath 的路径不是相对路径，没有 ../../ 这些，直接根据官网提示写图片路径，虽然模拟器不显示但是真机是正常的.

2.2、绘制多边形，使用围墙标记位置等等.

。

                          <template>
  <view class="map-con">
    <map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" :scale="11"
                          
                            
      :polygons
                          
                          ="polygon" :markers="covers">
    </map>
  </view>
</template>

<script>
                          
                            
  export 
                          
                          
                            default
                          
                          
                             {
    data() {
      
                          
                          
                            return
                          
                          
                             {
        longitude: 
                          
                          '116.304595'
                          
                            ,
        latitude: 
                          
                          '40.053207'
                          
                            ,
        polygon: [{
          fillColor: 
                          
                          '#f00'
                          
                            ,
          strokeColor: 
                          
                          '#0f0'
                          
                            ,
          strokeWidth: 
                          
                          3
                          
                            ,
          points: [{
              latitude: 
                          
                          '40.001321'
                          
                            ,
              longitude: 
                          
                          '116.304595'
                          
                            
            },
            {
              latitude: 
                          
                          '40.101321'
                          
                            ,
              longitude: 
                          
                          '116.274595'
                          
                            
            },
            {
              latitude: 
                          
                          '40.011321'
                          
                            ,
              longitude: 
                          
                          '116.374595'
                          
                            
            }
          ]
        }],
        covers: [{
          id: 
                          
                          1
                          
                            ,
          width: 
                          
                          30
                          
                            ,
          height: 
                          
                          33
                          
                            ,
          longitude: 
                          
                          "116.314595"
                          
                            ,
          latitude: 
                          
                          "40.021321"
                          
                            ,
          iconPath: 
                          
                          '/static/images/point.png'
                          
                            ,
        }, ]
      }
    }
  }

                          
                          </script>

。

更多样式配置我们去参考官网，官网使用文档写的很细致，地址为:

uniapp 官网：https://uniapp.dcloud.net.cn/component/map.html# 。

3、易错点

1、地图已经显示了，误以为地图未展示。

。

左下角有高德地图标识，就说明地图已经正常显示了，此时可以使用鼠标进行缩放，或设置地图的缩放比例或者修改下地图中心点的经纬度.

2、标记点自定义图标不显示。

marker 中的 iconPath 设置标记点的图标路径，可以使用相对路径、base64 等，但是在 h5 查看正常，app 打包之后就不能正常显示了，务必参考官网.

3、uni.getLocation 无法触发。

在调试模式中，调用 uni.getLocation 无法触发，其中的 success fail complete 都无法执行，不调用的原因是必须在 https 环境下，所以先保证是在 https 环境下.

4、有可用插件吗？

uniapp 插件：https://ext.dcloud.net.cn/search?q=map 。

搜索地图插件的时候，插件挺多的，有免费的也有付费的，即使使用插件也是需要需要注册第三方地图账号的.

我个人认为 uniapp 已经将第三方地图封装过了，使用挺便捷的，具体是否使用插件就根据项目实际情况定.

最后此篇关于uniapp地图如何添加？你要的教程来喽！的文章就讲到这里了,如果你想了解更多关于uniapp地图如何添加？你要的教程来喽！的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： .NET周刊【8月第3期2023-08-20】

文章推荐： MindSponge分子动力学模拟——软件架构（2023.08）

文章推荐： WPF-封装自定义雷达图控件

文章推荐：上周热点回顾（8.21-8.27）

教程
我正在做一个关于代码学院的教程，我在这里收到一个错误，说“看起来你的函数没有返回‘唉，你没有资格获得信用卡。资本主义就是这样残酷。’”当收入参数为 75 时。”但是该字符串在控制台中返回(由于某种原因
Go 教程 : Channels, Buffered Channels 教程
我正在阅读 Go 的官方教程，但很难理解 Channel 和 Buffered Channels 之间的区别。教程的链接是 https://tour.golang.org/concurrency/2和
MSHTML 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
LinqPad 教程
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题？ Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
JavaSpaces 教程
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
iOS5高级编程书籍/教程
作为 iOS 新手，有大量书籍可以满足学习基础知识的需求。现在，我想转向一些高级阅读，例如 OAuth 和 SQLite 以及动态 API 派生的 TableView 等。您可以推荐任何资源吗？最佳
Selenium 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Android开源游戏引擎+教程
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
c - 教程
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 8 年前。
【教程】AWD中如何通过Python批量快速管理服务器？
前言很多同学都知道，我们常见的CTF赛事除了解题赛之外，还有一种赛制叫AWD赛制。在这种赛制下，我们战队会拿到一个或多个服务器。服务器的连接方式通常是SSH链接，并且可能一个战队可能会同时有
1、Memcached 教程
Memcached是一个自由开源的，高性能，分布式内存键值对缓存系统 Memcached 是一种基于内存的key-value存储，用来存储小块的任意数据（字符串、对象），这些数据可以是数据库调用、A
01、Perl 教程
Perl 又名实用报表提取语言，是 Practical Extraction and Report Language 的缩写 Perl 是由拉里·沃尔（Larry Wall）于19
01、WSDL 教程
WSDL 是 Web Services Description Language 的缩写，翻译成中文就是网络服务描述语言 WSDL 是一门基于 XML 的语言，用于描述 Web Services 以
Perl UMMF 教程？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
用于创建自定义用户控件的 WPF 教程
我正在寻找解释在 WPF 中创建自定义用户控件的教程。我想要一个控件，它结合了一个文本 block 、一个文本框和一个启动通用文件打开对话框的按钮。我已经完成了布局，一切都连接好了。它有效，但它是三
sdk - dynamodb 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Django 教程，后退按钮混淆
我接近 fourth page of the Django tutorial 的开始看着vote查看，最后是这样的: # Always return an HttpResponseRedirect a
emacs - ClojureBox 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Qt QSS 教程
是否有任何好的 Qt QSS 教程，或者在某个地方我可以看到样式小部件的示例？如果某处可用，我想要一些完整的引用。除了有关如何设置按钮或某些选项卡样式的小教程外，我找不到任何其他内容。最佳答案 Qt
ASP.NET 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he

我是一只小鸟

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城