uniapp地图自定义文字和图标

这是我的结构:

<map class='map' id="map" :latitude="latitude" :longitude="longitude" @markertap="handleMarkerClick"   :show-location="true" :markers="covers"  />

记住别忘了在data中定义变量:

                latitude: '', // 初始纬度  
                longitude: '', // 初始经度   
                covers: [], // 覆盖物数组  

然后请求位置:

getMyLocation() {
                uni.getLocation({
                    type: 'wgs84',
                    success: (res) => {
                        this.jinweidu = res.longitude + ',' + res.latitude
                        this.latitude = res.latitude
                        this.longitude = res.longitude
                        //这是我的请求可以换成你们请求的接口
                        this.$u.get("/app/store/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(
                         res => {
                              if (res.code == 200) {
                                  this.listmap = res.data
                                  res.data.forEach(item => { //这是将请求的数据循环并且每个更换图标和文字
                                        const shopCover = { 
                                            id: parseFloat(item.storeId),
                                            latitude: item.lat,
                                            longitude: item.lng,
                                            width: 25,
                                            height: 30,
                                            iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uZXgsJE6hXbRSwbKILB4',
                                            label: {
                                                content: item.name,
                                                fontWeight: 700,
                                                color: '#8883F0',
                                                textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
                                                style: {

                                                },
                                            }
                                        };
                                        this.covers.push(shopCover) //最后将更改好的数据放到地图数组中
                                    });
                                }
                            });
                    },
                    fail: (err) => {
                        console.error('获取位置失败:', err);
                    }
                });
            },

最后显示效果:

### UniApp 地图标点功能实现及相关问题 #### 天地图 API 配置与使用UniApp 中集成天地图并实现地图标点功能,需完成以下操作。首先,需要申请天地图 Key 并将其配置到项目中[^1]。通过调用 `tianditu` 的相关接口可以加载地图以及设置标记点。 以下是基于天地图地图初始化标点的代码示例: ```javascript // 初始化地图组件 const map = new T.Map('mapContainer'); // 'mapContainer' 是 HTML 元素 ID const point = new T.LngLat(116.407528, 39.90403); // 设置经纬度坐标 const marker = new T.Marker(point); // 创建标注对象 map.addOverLay(marker); // 将标注添加至地图上 marker.setLabel({ content: "这里是北京", offset: { x: -10, y: -20 } }); // 添加标签文字 ``` 上述代码展示了如何创建一个简单的地图实例,并在其上放置一个带有自定义标签的标记点--- #### 腾讯地图 H5 接入与 IP 定位 对于 H5 应用场景下的腾讯地图接入,可以通过引入其 JavaScript SDK 来快速开发地图应用[^2]。具体来说,开发者需要先注册账号并获取密钥 (Key),随后按照官方文档中的说明嵌入地图服务。 下面是一个利用腾讯地图插件进行用户当前位置展示的例子: ```html <div id="container" style="width: 100%; height: 400px;"></div> <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script> <!-- 替换 YOUR_KEY --> <script> const centerCoord = new qq.maps.LatLng(23.135142, 113.357184); const mapObj = new qq.maps.Map(document.getElementById("container"), { center: centerCoord, zoom: 12 }); function addMarker(latlng) { var marker = new qq.maps.Marker({ position: latlng, map: mapObj }); } navigator.geolocation.getCurrentPosition(function(position){ let userLocation = new qq.maps.LatLng( position.coords.latitude, position.coords.longitude ); addMarker(userLocation); },function(error){ console.error(`Error Code ${error.code}: ${error.message}`)}); </script> ``` 此脚本片段演示了怎样借助浏览器地理定位 API 获取用户的实时位置数据,并动态更新到地图界面上。 --- #### 常见错误排查指南 当尝试部署或调试 UniApp 地图模块时可能会碰到一些典型障碍,比如无法正常渲染地图画面或者未能成功绘制图标等问题。针对这些情况可参考如下建议处理方法: - **确认网络状态良好**:如果发现页面空白,则可能是由于互联网连接不稳定造成的加载失败现象。 - **验证 API 密匙有效性**:确保所使用的访问令牌处于激活期内并未被封禁。 - **调整权限设定**:某些情况下需要额外授予应用程序读取 GPS 数据的权利才能顺利完成精确定位任务[^3]。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值