小程序地图大脑袋

微信小程序中的地图map.js和map.wxss

map.wxml中代码

<view class='view'>
  <!--地图容器-->
  <map id="myMap" 
    markers="{{markers}}" 
    longitude="{{longitude}}" 
    latitude="{{latitude}}" 
    polyline="{{polyline}}"
    enable-scroll="{{scroll}}"
    include-points="{{points}}" 
    covers="{{covers}}" show-location>
  </map>

  <view class="multiFun" style="top:{{viewTop}}rpx ;" 
    bindtouchstart="mytouchstart" 
    bindtouchmove="mytouchmove"
    bindtouchend="mytouchend">
    <view class="seachbox">
      <!-- 顶部线 -->
      <view class="line"></view>
      <!-- 搜索框 -->
      <view class="search">
          <input style="width: 587rpx; height: 84rpx; display: block; box-sizing: border-box; left: NaNrpx; top: NaNrpx"  class="seachinput"
            maxlength="15" 
            placeholder="  查找地名、景观、建筑" 
            bindinput="placeInput"
            bindconfirm="onSearch"
          />
          <image class="seachicon"
            style="height: 65rpx; width: 65rpx; left:85%; position: fixed; "
            src="/resources/images/mapPage/lighting.png" 
            mode="aspectFit"
            bindtap="onSearch">
          </image>
      </view>
      
      <!-- 图标栏 -->
      <view class="AI">
          <image class="typeicon" src="/resources/images/mapPage/sleaves.png" bindtap="goTohuacao"></image>
          <image class="typeicon" src="/resources/images/mapPage/tree.png" bindtap="goToshumu"></image>
          <image class="typeicon" src="/resources/images/mapPage/swallow.png" bindtap="goTodongwu"></image>
          <image class="typeicon" src="/resources/images/mapPage/market.png" bindtap="goTogoods"></image>
          <image class="typeicon" src="/resources/images/mapPage/headset-one.png" bindtap="goToGuider"></image>
      </view>

      <!-- 文字栏 -->
      <view class="AItext">
        <view class="Mytext">
          <text>花草</text>
        </view>
        <view class="Mytext">
          <text>树木</text>
        </view>
        <view class="Mytext">
          <text>动物</text>
        </view>
        <view class="Mytext">
          <text>物品</text>
        </view>
        <view class="Mytext">
          <text>导游</text>
        </view>
      </view>

      <!-- 分割线 -->
      <view class="divideline"></view>
      
      <!-- 工具栏 -->
      <view class="tools">
        <view class="icon2" bindtap="voiceHelp">
          <image class = "toolicon" src="/resources/images/mapPage/headset-one.png" ></image>
          <text>语音助手</text>
        </view>
        <navigator class="icon2"url="../road/road">
          <image class = "toolicon" src="/resources/images/mapPage/connection.png" ></image>
          <text>路径规划</text>
        </navigator>
      </view>
    </view>
  </view>
</view>

 

app.json中代码

{
  "pages": [
    "pages/map/map",
    "pages/showcards/index",
    "pages/home/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "weixi",
    "navigationBarTextStyle": "black"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "tabBar": {
    "color": "#888888",
    "selectedColor": "#17862B",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/map/map",
        "iconPath": "resources/images/downPage/home-off.png",
        "selectedIconPath": "resources/images/downPage/home-on.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/showcards/index",
        "iconPath": "resources/images/downPage/cart-off.png",
        "selectedIconPath": "resources/images/downPage/cart-on.png",
        "text": "附近"
      },
      {
        "pagePath": "pages/home/index",
        "iconPath": "resources/images/downPage/my-off.png",
        "selectedIconPath": "resources/images/downPage/my-on.png",
        "text": "我的"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}