Uniapp使用腾讯地图并进行标点创建和设置保姆教程

使用Uniapp内置地图

  • 首先我们需要创建一个uniapp项目

首先我们需要创建一个uniapp项目

我们在HBuilder左上角点击文件新建创建一个项目
Uniapp使用腾讯地图并进行标点创建和设置保姆教程_第1张图片
然后下面这张图的话就是uniapp创建项目过程当中需要注意的一些点和具体的操作
Uniapp使用腾讯地图并进行标点创建和设置保姆教程_第2张图片
然后我们创建完项目之后进入到项目pages文件夹下,创建一个新的Vue页面或者是也可以直接使用里面的Vue页面,然后我们需要打开Uniapp官网链接: https://uniapp.dcloud.net.cn/component/map.html#使用里面的内置组件当中的map组件
Uniapp使用腾讯地图并进行标点创建和设置保姆教程_第3张图片
Uniapp使用腾讯地图并进行标点创建和设置保姆教程_第4张图片
这里我们涉及到一个标点的创建,那么标点的创建我们可以通过设置里面的latitude和longitude的坐标点来进行定位坐标点,这里我们注意,当我们添加多个坐标点的时候,我们需要在我们的坐标点字典里面添加id字段
Uniapp使用腾讯地图并进行标点创建和设置保姆教程_第5张图片
这里我们讲解一下map地图上面的一些常用的参数和方法
Uniapp使用腾讯地图并进行标点创建和设置保姆教程_第6张图片
当我们通过设置的markertap方法拿到我们点击的坐标id的之后,查找到我们想要的数据信息
Uniapp使用腾讯地图并进行标点创建和设置保姆教程_第7张图片

最后需要的一点是,在使用内置地图的过程当中可能会出现显示不出来的效果,那么这个时候我们将我们的微信小程序的版本设置为版本2.11.2
Uniapp使用腾讯地图并进行标点创建和设置保姆教程_第8张图片

你可能感兴趣的:(uniapp,uni-app,vue)