微信小程序使用高德地图实现标点图标修改

最新推荐文章于 2025-10-29 17:04:16 发布

原创

最新推荐文章于 2025-10-29 17:04:16 发布 · 6.3k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #前端

本文介绍了如何在微信小程序中使用高德地图API，包括关键步骤、app.js的配置、地图组件的设置，以及如何根据后台数据创建自定义标记和气泡样式。重点讲解了如何解决iconPath空白、倒三角形实现和动画效果的问题。

在这里插入图片描述

微信小程序引入高德地图

高德地图开放平台
根据入门指南完成前五步后建议在app.js中引入 amap-wx.js 并初始化高德地图

app.json

// 引入路径 根据自己文件所在位置引入
var amapFile = require('./libs/amap-wx.130.js');
onLaunch(){
   
   
    this.globalData.myAmapFun = new amapFile.AMapWX({
   
   
      key: '你申请的key'
    });
},
  globalData: {
   
   
    myAmapFun: null,
  }

要使用的页面

index.wxml map 参数请参考微信开放平台

longitude:中心经度
latitude:中心纬度
scale:缩放级别
markers:标记点
show-location:显示带有方向的当前定位点
bindcallouttap:点击标记点对应的气泡时触发

<view class="map_container">
  <map class="map" id="map" longitude="{
    
    {longitude}}" latitude="{
    
    {latitude}}" scale="10" show-location="true" markers="{
    
    {markers}}"  bindmarkertap="makertap">
    <!--  marker 上的气泡 callout -->
    <cover-view slot="callout">  
      <cover-view wx:for="{
    
    {markers}}" wx:key="index" marker-id