地图map微信小程序功能页面 展示,导航,选点一体化,可改造成为租车应用 1.0版

微信地图map的的小程序

这个小程序页面,把选点,导航,展示门店等功能一体化整合了,而且整合效果比微信的导航+选点插件更加的好。
此版本是第一版,已经基本满足上述要求,如有特殊需求,请自行开发即可。
2.0版本,对地图进行了美化和功能增强,需要测试请到下面测试地址进行测试。
如果需要,你可以将其改造成租车等应用。

测试地址

地址:app.zjhn.top/test/
创建社区团购应用,进行测试

使用帮助

1,请先注册腾讯地图的map key,更改js中的mapkey
2,部分页面和模板未包含,请删除或者创建
3,get_pos()函数为获取gps地址,请自行创建或者编写即可
4,此函数基本上没有太多的后台数据读取

在这里插入图片描述
上代码

<import src="../temp.wxml"/><template is="nav" data="{
    {nav}}"></template>

<map id="map" longitude="{
    {longitude}}" latitude="{
    {latitude}}" scale="{
    {scale}}" markers="{
    {marker}}" enable-3D="true"  enable-overlooking="true" enable-rotate="true" enable-building="true" setting="{
    {setting}}" bindmarkertap="select_this_point" polyline="{
    {polyline}}"  bindregionchange="regionchange">
</map>


<view class="shop_list_box">
<view class="ponit" bindtap="moveToLocation" wx:if="{
    {show_shop!='show'}}"></view>
<view class="icon icon-roundclosefill" wx:if="{
    {show_shop=='show'}}" bindtap="win_close" data-c="show_shop"></view>

<view class="box">
<view class="shop_info" >
<view class="shop_name" bindtap="select_shop_location">{
  {shop.shot_name}}</view>
<view class="shop_addr" wx:if="{
    {shop.dis && !shop.time}}">距离您<text>{
  {shop.dis}}</text></view>
<view class="shop_addr" wx:if="{
    {shop.time}}">驾车距离<text>{
  {shop.distance}}</text>,预估需要<text>{
  {shop.time}}</text></view>

<view class="shop_addr" wx:if="{
    {!shop.dis && !shop.time}}">{
  {shop.city}}{
  {shop.dist}}{
  {shop.addr}}</view>
<view class="icon icon-daohang1" wx:if="{
    {shop.dis}}" bindtap="daohang"></view>
<view class="icon icon-map-marker-radius" wx:if="{
    {ac=='position'}}" bindtap="select_this_position"></view>
</view>

<view class="search_box" wx:if="{
    {show_shop!='show' && ac!='daohang'}}" bindtap="win_open" data-c="show_shop">
<text class="icon icon-search" ></text>{
  {ac=='daohang'?'查找更多的门店':'查找我的位置'}}</view>

<view class="hide_bt icon  icon-chevron-down" wx:if="{
    {show_shop=='show'}}" bindtap="win_close" data-c="show_shop"></view>

<view class="addr_list" wx:if="{
    {show_shop=='show' && ac=='position'}}">
<view class="search_x"><text class="icon icon-search" ></text><input placeholder="请输入我的位置关键词" value="{
    {key}}" bindinput="key_input" bindblur="search_this"></input></view>
<view class="item {
    {shop.id==item.id?'select':''}}" wx:for="{
    {marker}}" wx:key="id" 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

羲云网络

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值