微信小程序实战 -- map:根据百度地图的api来获取地址信息

先附上实现效果:
  

实现的功能有:(中间“红色图标”所在位置为选择的定位)
1. 拖动地图,进行定位;
2. 根据输入的内容进行地图定位。

一. 申请秘钥ak ,下载百度地图微信小程序JavaScript API

1. 百度地图开放平台申请ak:http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

注册 -> 登录 -> 控制台 ->创建应用

创建应用时,应用名称自定义,应用类型选择“微信小程序”,APPID为小程序的appId,然后提交。

复制AK即可。


2. 下载百度地图微信小程序JavaScript API:http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download

下载后,拷贝到libs目录下,在相应js模块进行引入。

二. map.wxml

先展示map.wxml

<view class='map'>
  <!-- 搜索框 -->
  <view class='search pRelative'>
    <icon class='iconfont icon-icon--'></icon>
    <input type='text' placeholder='搜索' bindinput="bindKeyInput" value='{
  {searchCon}}'></input>
  </view>
  <view class='section'>
    <!-- 地图 -->
    <map id="myMap" 
    latitude="{
  {latitude}}" 
    longitude="{
  {longitude}}" 
    scale="{
  {scale}}" 
    markers="{
  {markers}}" 
    covers="{
  {covers}}" 
    bindcontroltap="controltap"
    bindmarkertap="markertap"
    bindregionchange="regionchange"
    show-location >
    <!-- 搜索列表 -->
    <cover-view class="searchCon">
      
  • 7
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值