微信小程序地图map组件及周边设施poi查询显示

最新推荐文章于 2025-07-22 16:29:04 发布

原创

最新推荐文章于 2025-07-22 16:29:04 发布 · 1w 阅读

15 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中使用map组件进行定位显示，并结合高德地图SDK查询并显示周边设施。通过wxml布局，js逻辑处理，以及wxss样式设置，实现了地图的居中显示和 poi 点的查询。遇到的问题如原生组件层级最高，使用cover-view解决。同时分享了高德SDK的获取与应用，以及key的申请步骤。

前言：最近在做微信小程序，查阅了网上的一些资料自己做了改动。任务模块中用到了小程序的map组件，实现了定位显示及查询poi显示周边特定设置的功能，点击其中的定位位置，可以显示这个设施的名字和地址。

1.wxml页面

 
  < 
  view 
  class= 
  "menu-item-api-list docList" 
  > 
 
 
  < 
  map 
  class= 
  "map" 
  longitude= 
  "{ 
   {longitude}}" 
  latitude= 
  "{ 
   {latitude}}" 
  include-points= 
  "{ 
   {points}}" 
 
 
   markers= 
  '{ 
   {markers}}' 
  bindmarkertap= 
  "makertap"> 
 
 
  < 
  cover-view 
  class= 
  "map-tab-bar"> 
 
 
  < 
  cover-view 
  class= 
  "map-tab-li { 
   {item.id == status ? 'active' : ''}}" 
  bindtap= 
  "getType" 
 
 
   data-type= 
  "{ 
   {item.id}}" 
  wx:key= 
  "aroundListId" 
  wx:for= 
  "{ 
   {aroundList}}">{ 
  {item.name}} 
 
 
  </ 
  cover-view 
  > 
 
 
  </ 
  cover-view 
  > 
 
 
  < 
  cover-view 
  class= 
  "map-foot" 
  wx:if= 
  "{ 
   {showmark}}"> 
 
 
  < 
  cover-view 
  class= 
  "mapName">{ 
  {textData.name}} 
  </ 
  cover-view 
  > 
 
 
  < 
  cover-view 
  class= 
  "mapDesc">{ 
  {textData.desc}} 
 