微信小程序插入个性化地图

简介: 微信小程序插入个性化地图

1 问题

如何在微信小程序中插入个性化地图。

2 方法

  1. 进入腾讯地址服务官网

  2. 控制台  —>  个性化地图  —>  个性化样式  —>  样式选择


  3. 选择自己喜欢的样式并输入自己的小程序的APPID,之后系统会生成密钥(key)

  4. 在小程序的index.wxml页面加入以下代码:
<map style="width: 100%; height: 100%;" scale="4" subkey="你的key" markers="{{markers}}" include-points="{{markers}}">
<map>
  1. 在index.wxss加入以下代码:
page{
display: flex;
flex-direction: column;
height: 100%;
}
  1. 最终结果如图:

4结语

微信小程序插入地图的方式比较简单,也可以直接用<map>标签插入,后续将介绍<map>的更多使用方法。



目录
相关文章
|
6月前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
111 1
|
6月前
|
XML 小程序 JavaScript
微信小程序如何使用地图
微信小程序如何使用地图
203 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的个性化餐饮场所推荐附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的个性化餐饮场所推荐附带文章源码部署视频讲解等
22 0
|
5月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
356 0
|
5月前
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
86 0
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的个性化旅游攻略定制系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的个性化旅游攻略定制系统附带文章和源代码部署视频讲解等
31 1
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的个性化美食推荐系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的个性化美食推荐系统附带文章和源代码部署视频讲解等
53 1
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的高校图书馆个性化服务附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的高校图书馆个性化服务附带文章和源代码部署视频讲解等
36 1
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的个性化新闻推荐系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的个性化新闻推荐系统附带文章和源代码部署视频讲解等
52 0
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
247 3

热门文章

最新文章

下一篇
无影云桌面