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

最新推荐文章于 2024-03-21 18:02:44 发布

星星之火M

最新推荐文章于 2024-03-21 18:02:44 发布

阅读量6k

点赞数 7

分类专栏：微信小程序文章标签：百度地图api

本文链接：https://blog.csdn.net/qq_41638795/article/details/90639496

版权

本文介绍了如何在微信小程序中使用百度地图API，包括申请秘钥AK、地图JavaScript API的下载与引入、实现拖动地图定位、输入内容定位及解决报错问题。详细讲解了地图组件wxml的配置、js的实现逻辑以及逆地址解析过程。

摘要由CSDN通过智能技术生成

先附上实现效果：

实现的功能有：（中间“红色图标”所在位置为选择的定位）
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">
      <cover-view class='searchCon-item' wx:for="{
  {searchResult}}" wx:key="unique" data-value="{
  {item}}" bindtap='tapSearchResult'>
        <cover-view class='iconfont icon-icon--'></cover-view>
        <cover-view class='addressname'>
          {
  {item.name}}
          <cover-view>{
  {item.province+item.city+i