Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >在uniapp中引入地图

在uniapp中引入地图

作者头像
阿超
发布于 2022-08-17 11:38:26
发布于 2022-08-17 11:38:26
98900
代码可运行
举报
文章被收录于专栏:快乐阿超快乐阿超
运行总次数:0
代码可运行

在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空,他仿佛要离开人间而去,使人们仰面不再看见。——鲁迅《秋夜》

直接使用uniapp自带的map组件即可

文档:https://uniapp.dcloud.io/component/map

代码如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
	<view>
		<view class="map-parent"><map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map></view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			latitude: 39.909,
			longitude: 116.39742,
			covers: [
				{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/images/location.png',
					width: 40,
					height: 40
				}
			]
		};
	}
};
</script>

我这里包含一个图片

放到这里啦

最终效果如下

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-07-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uni-app 微信小程序中关于 map 地图使用案例分享
 这篇文章,我将带领大家使用微信内置地图详细讲解关于如何配置地图、打开地图和使用地图。
跟着飞哥学编程
2022/12/02
5.9K0
『UniApp』核心语法
下载地址:https://www.dcloud.io/hbuilderx.html
程序员NEO
2023/12/26
5862
『UniApp』核心语法
【愚公系列】2022年04月 微信小程序-地图的使用之API相关函数案例
control 在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view
愚公搬代码
2022/04/21
8580
【愚公系列】2022年04月 微信小程序-地图的使用之API相关函数案例
腾讯位置服务开发应用-使用教程,案例分享,知识总结
作为一名在职岗位为【前端开发工程师】的程序员,我开发的应用程序经常需要获取用户位置信息,需要再某些场合下使用展示地图以及地图商的某些地点,需要获取行政区划列表(省市区)以及地址详情信息,需要在地图上规划一条(动态)路线,轨迹回放,小车移动,需要创建信息窗口,用于地点的摘要性信息的展示。
达达前端
2020/12/28
6.6K0
腾讯位置服务开发应用-使用教程,案例分享,知识总结
腾讯位置服务开发应用-使用教程,案例分享,知识总结
作为一名在职岗位为【前端开发工程师】的程序员,我开发的应用程序经常需要获取用户位置信息,需要再某些场合下使用展示地图以及地图商的某些地点,需要获取行政区划列表(省市区)以及地址详情信息,需要在地图上规划一条(动态)路线,轨迹回放,小车移动,需要创建信息窗口,用于地点的摘要性信息的展示。
腾讯位置服务
2021/07/29
3.2K0
腾讯位置服务开发应用-使用教程,案例分享,知识总结
四. css 布局之 float
块元素: 1、块元素不在独占页面的一行 2、脱离文档流以后,块元素的宽度和高度默认都被内容撑开
小海怪的互联网
2020/09/22
8160
HBuilderX 4.62 开始,uni-app 支持嵌入鸿蒙原生组件
从 uni-app 4.62 版本起,开发者可以通过 UTS 插件将鸿蒙原生组件嵌入到 uni-app 应用中,并且支持同层渲染。这一功能使得开发者能够充分利用鸿蒙系统的原生组件,提升应用的性能和用户体验。以下是具体介绍和实际案例。
徐建国
2025/04/28
1520
HBuilderX 4.62 开始,uni-app 支持嵌入鸿蒙原生组件
uni-app 组件
view scroll-view swiper text rich-text progress
达达前端
2019/10/14
1K0
【愚公系列】2022年04月 微信小程序-地图的使用之点聚合
customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制,灵活度更高。
愚公搬代码
2022/12/01
1.7K0
【愚公系列】2022年04月 微信小程序-地图的使用之点聚合
uniapp 与 webview 在app中参数传递
webview默认占用全屏,建议使用uniapp原生导航栏,不然还要自己画,全局关闭的,可以单独页面开启,新增时设置top和bottom
风花一世月
2024/03/19
9300
案例一---位置共享---主次要人物定位
说明 主要人物能看到所有人的位置 次要人物只能看到主要人物 次要人物会自动规划一条去主要人物的线路 主要人物 <template> <view> <map id="myMap" :ma
代码哈士奇
2021/02/04
3920
案例一---位置共享---主次要人物定位
案例二---移动轨迹---实时和静态
移动轨迹 说明 静态 动态 说明 静态就是获取移动的点位数组 画图 动态实时获取位置 可以压缩点位进行绘制 这里不压缩 压缩移步 腾讯位置服务 路径规划 https://lbs.qq.com/
代码哈士奇
2021/02/04
6240
案例二---移动轨迹---实时和静态
微信小程序 地图定位、选址,解决regionchange重复调用
【注意】getLngLat()这个方法做了抽取,因为不光初始化要调用,且在视野发生变化的时候也要调用
yechaoa
2022/06/10
2.1K0
微信小程序 地图定位、选址,解决regionchange重复调用
【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-04周边站点-地图展示
本文使用的是百度地图API,百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。 百度地图JavaScript API支持HTTP和HTTPS,免费对外开放,可直接使用。接口使用无次数限制。在使用前,您需先申请密钥(ak)才可使用。
愚公搬代码
2022/04/30
5400
【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-04周边站点-地图展示
小程序基础-组件
⽂本的<text>组件、表示图像的<image>组件、表示视图容器的 <view>组件,表示链接的<navigator>组件
达达前端
2019/11/29
4990
小程序物流详情展示的实现
在日常生活中,我们会很方便的用小程序查看实时的物流详情,本文通过高德API模拟物流的路径数据,实现小程序中物流详情的展示。
牛老师讲GIS
2021/09/10
7070
微信小程序地图实时定位_小程序获取当前位置定位信息
因为小程序更新了获取地理位置API接口,需要先在app.json中配置一下permission字段 ,不然会报微信小程序getLocation 需要在app.json中声明permission字段
全栈程序员站长
2022/11/10
4.5K0
微信小程序地图实时定位_小程序获取当前位置定位信息
【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-01周边站点
小程序的周边站点是实时获取当前登录用户的位置信息,进而给出附件公交车站信息,以便用户选择乘车方案。
愚公搬代码
2022/04/21
4540
【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-01周边站点
三. CSS layout(布局)
网页是一个多层的结构,一层摞着一层,通过CSS可以分别为每一层来设置样式,作为用户来讲只能看到最顶上一层,这些层中,最底下的一层称为文档流,文档流是网页的基础, 我们所创建的元素默认都是在文档流中进行排列,
小海怪的互联网
2020/09/22
2.3K0
全栈开发工程师微信小程序-中
每个open-type都有默认的url属性,open-type为navigateBack时,url无效,delta的属性表示为反退,默认是1.
达达前端
2019/07/03
9150
全栈开发工程师微信小程序-中
推荐阅读
相关推荐
uni-app 微信小程序中关于 map 地图使用案例分享
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验