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

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

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>的更多使用方法。



目录
相关文章
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
749 1
|
XML 小程序 JavaScript
微信小程序如何使用地图
微信小程序如何使用地图
1458 4
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的个性化旅游攻略定制系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的个性化旅游攻略定制系统附带文章和源代码部署视频讲解等
276 1
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的个性化美食推荐系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的个性化美食推荐系统附带文章和源代码部署视频讲解等
214 1
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的高校图书馆个性化服务附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的高校图书馆个性化服务附带文章和源代码部署视频讲解等
290 1
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的个性化餐饮场所推荐附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的个性化餐饮场所推荐附带文章源码部署视频讲解等
211 0
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
2241 0
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
893 0
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的个性化新闻推荐系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的个性化新闻推荐系统附带文章和源代码部署视频讲解等
285 0
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。