h5页面简单实现地图功能

1、参考:https://www.cnblogs.com/xianwen/p/6045454.html

2、嵌入百度地图和使用百度地图api自定义地图

  • 第一步:进入百度创建地图的网站,搜索出自己要展示的位置。

  • 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动。

  • 第三步:添加标注。点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位。标记图标处可更换图标形状,名称和备注填入位置相关信息。

  • 第四步:获取代码。将代码贴到你的网页里就OK了:

http://api.map.baidu.com/lbsapi/creatmap/

中国各省市县级 JSON 文件

https://blog.csdn.net/u013310119/article/details/78651115

  • 0
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序内嵌H5实现地图选址的方法有多种,我来介绍一种常用的方式。 首先,我们需要在小程序中创建一个button按钮,用户点击该按钮后会跳转到H5页面。可以通过小程序的wx.navigateTo函数实现页面跳转,并传递参数给H5页面。 在H5页面中,我们可以引入地图相关的JavaScript库,例如百度地图API或者高德地图API。通过调用API提供的函数和方法,可以实现H5页面显示地图,并提供选址的功能。 在地图上选址的过程中,可以使用地图API提供的搜索功能,让用户输入关键字,然后根据关键字在地图上搜索相关位置,并在地图上标注出搜索结果。用户可以在搜索结果中选择一个位置作为选址。 当用户在H5页面上选中了一个位置后,可以通过调用JavaScript代码的方式将选中的位置信息传递给小程序。在H5页面中,可以使用window.location.href实现页面跳转,并将选中的位置信息作为url参数传递给小程序。 在小程序中,可以通过wx.navigateBack函数回到上一个页面,并通过上一个页面的参数接收选中的位置信息。然后,可以使用这些位置信息在小程序中进行相应的处理,例如显示选址结果、保存选址信息等。 综上所述,通过小程序内嵌H5实现地图选址的步骤为:小程序中创建按钮 → 跳转到H5页面并传递参数 → H5页面显示地图实现选址功能 → 用户选中位置并将选中位置信息传递给小程序 → 小程序接收选中位置信息并进行相应处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值