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

微信小程序引入高德地图

高德地图开放平台
根据入门指南完成前五步后建议在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="{{index}};"><cover-view class="bigBox"><cover-view class="box" style="background:{{selectIndex==index?'#FF8929':'#0081FF'}};border-color:{{selectIndex==index?'#FF8929':'#0081FF'}};"><cover-view class="font">{{item.name}}</cover-view><cover-view class="right">{{item.count}}套房</cover-view></cover-view><cover-view><cover-image src="{{selectIndex==index?'https://file.yunsaup.com/9810B0DBB85C4F86831BB3B42B0BE43A/2de1558d72afb55530598a5b827d46d6/%E4%B8%89%E8%A7%92%E5%BD%A2.png':'https://file.yunsaup.com/9810B0DBB85C4F86831BB3B42B0BE43A/638b80eb8b1a5dd3271e7611f04cfcfc/%E4%B8%89%E8%A7%92%E5%BD%A2.png'}}" class="triangle"></cover-image></cover-view></cover-view></cover-view></cover-view></map>
</view>

index.wxss

.map_container {position: absolute;top: 0;bottom: 0;left: 0;right: 0;
}.map {width: 100%;height: 100%;
}.bigBox {height: 120rpx;
}.box {min-width: 340rpx;height: 60rpx;background: #0081FF;border-radius: 4px 4px 4px 4px;text-align: center;line-height: 64rpx;font-size: 28rpx;border: #0081FF 1px solid;position: relative;
}.triangle {width: 30rpx;height: 30rpx;margin-top: -10rpx;margin-left: 168rpx;
}

index.js

逻辑：根据后台接口返回的数据改造成当前map需要的数据并显示在地图上

// 第一步 后端后端数据并改造
data:{params:{}, // 我的接口需要的数据latitude:"", // 纬度longitude:"", // 经度},getList() {api.houseFind({}, this.data.params).then(res => {if (res.success) {var markersData = []res.data.content.map((item, index) => {var obj = {address: item.WIDGET_1627373296556_DATA.WIDGET_1649238673229.addr, // 自定义数据 我自己需要的数据id: index, // 标记点 idiconPath: 'https://file.yunsaup.com/9810B0DBB85C4F86831BB3B42B0BE43A/95813dd5c4a29c519cb18ebd3c08327e/%E6%9C%AA%E6%A0%87%E9%A2%98-1.png',  // 显示的图标  这是一个透明图片  为了替换掉默认 图标width: '2rpx',  // 标注图标宽度height: '2rpx', // 标注图标高度idRecord: item.WIDGET_1627373296556_DATA.ID, // // 自定义数据 我自己需要的数据latitude: item.WIDGET_1627373296556_DATA.WIDGET_1649238673229.lat, // 纬度longitude: item.WIDGET_1627373296556_DATA.WIDGET_1649238673229.lng, // 经度name: item.WIDGET_1627373296556_DATA.WIDGET_1649238673229.name, // 自定义数据 我自己需要的数据customCallout: {  // 自定义气泡窗口 display: 'ALWAYS', // 常显anchorX: 20, // 横向偏移  根据自己的设计图 来自定义anchorY: 10,// 竖向偏移  根据自己的设计图 来自定义},count: item.WIDGET_1627373296556_DATA.WIDGET_1646730852244}markersData.push(obj)this.setData({markers:markersData})})}// 初始化地图this.init()}).catch(err => {console.log(err, '错误了')})
},// 初始化地图
init() {// 获取app中定义的myAmapFun参数var myAmapFun = getApp().globalData.myAmapFun// 定位当前地址myAmapFun.getRegeo({success: function (data) {this.setdata({longitude:data[0].longitude,latitude[0].latitude,})},fail: function (info) {wx.showModal({title: info.errMsg})}})
},

最后 只是实际项目的精简版本有问题可以私信探讨一下

我项目中遇到的问题
1、markers 如何变成设计图中的下列效果
解决方法通过对markers的iconPath 设置成空白图片 用气泡插槽实现效果

2、倒三角形实现
解决方法：原计划用cover-view 通过boder 实现后查阅资料发现不支持border属性
现：通过 cover-image 图片进行实现这里避免使用wx:if 还有一个问题用cover-image时有什么第一次进入页面不显示目前正在查阅资料

3、我这儿有动画效果的实现
点击 气泡实现 内容的拉起

  callouttap(e) {// 调用动画this.showCostDetailFun()},// 显示 动画showCostDetailFun() {var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})animation.translateY('-65vh').step()this.setData({animationData: animation.export(),isOpen: true,})},

html


<view  animation="{{animationData}}"></view>

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

uni-app 中微信小程序使用高德地图等第三方 SDK的方法
获取SDK 首先在高德开放平台,注册账号并且申请相关的 key 等信息: 然后下载它的微信小程序版 SDK:微信小程序 SDK 然后填写app包名,申请原生sdk的appkey信息,但不需要下载原生s ...
微信小程序引入高德地图Demo 快速上手
文章目录前言一.获取高德key 二.引入官方实例总结前言本文参照官方文档进行编写最后引入官方实例最终效果 ` 一.获取高德key 注册账号 https://lbs.amap.com/?r ...
uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址
开发过小程序的都了解,我们在调用 uni.getLocation Api的时候,在微信小程序端,只会返给我们一个坐标系,当前位置的经纬度,当我们需要去知道当前位置的详细地址时,我们就需要进行反解析来获 ...
微信小程序：高德地图在小程序中的实践（含静态地图）
前言前人栽树,后人乘凉.记录下工作的点点滴滴,让同道中人少走弯路~ 来看看需求和问题:房产相关的项目,详情中需要显示房源地址,底部要有固定的菜单(不是tabbar),房源数据过多,数据超过一屏时,m ...
微信小程序使用高德地图Web服务爬取企业数据
高德地图Api官网:高德开放平台 | 高德地图API 一.高德地图使用说明 "POI2.0" 地点搜索服务2.0是一类Web API接口服务:服务提供多种场景的地点搜索能力,包括关 ...
微信小程序使用高德地图
微信小程序--高德地图开发应用(获取key) 1.利用高德开发平台创建应用 http://lbs.amap.com/dev/index 2.点击创建新应用进入创建模态框 3.添加新Key 在创建的应用 ...
uniapp开发微信小程序使用高德地图
uniapp 官方文档地图组件控制地图组件高德地图key需要公司去申请,之后自己在下载高德地图微信小程序插件下好的js文件放在项目中,之后在vue项目中的main.js文件中全局注入 // ...
微信小程序整合高德地图获取定位经纬度信息
1.登录高德地图https://lbs.amap.com/ a.创建新应用这个key后边整合的时候会用到,精彩继续 b.下载SDK https://lbs.amap.com/api/wx/down ...
微信小程序开发-高德地图api
第一步: 既然是高德地图的使用,那么我们首先进入高德地图开放平台:高德地图注册之后在应用管理新建一个应用获取key 获取key之后我们去高德地图API看看高德对API的介绍, 相关下载那有sdk的下 ...

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

微信小程序引入高德地图

app.json

要使用的页面

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

最新文章

热门文章

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

微信小程序 引入高德地图

app.json

要使用的页面

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

最新文章

热门文章

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

微信小程序引入高德地图

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