使用hbuilder中得内置浏览器打开预览可以显示小图标和气泡 ,在手机上均不显示 是什么问题呢
这是内置浏览器:
在手机上打开同个IP 预览:
代码 getPoi(item){
this.markers = [];
this.Tmap.getSuggestion({
keyword: item.type,
location: `${this.location.latitude},${this.location.longitude}`,
success:(data) => {
const reqData = data.data;
let markers = [];
if(reqData.length === 0) {
uni.showToast({
title: '该小区附近暂无'+item.type,
duration: 2000,
icon: 'none'
});
}else{
markers= reqData.map(i => ({
id:i.id,
latitude: i.location.lat,
longitude: i.location.lng,
iconPath: `../../static/mapIcon/dingwei-${item.name}@${this.pixelRatio}x.png`,
// #ifdef H5
iconPath: `/static/mapIcon/dingwei-${item.name}@2x.png`,
// #endif
width: 28,
height: 28,
}))
}
markers.push({
latitude: this.location.latitude, //纬度
longitude: this.location.longitude, //经度
iconPath: '../../static/images/dingwei.png', //显示的图标
title: '', //标注点名
callout: { //自定义标记点上方的气泡窗口 点击有效
content: this.xqName,
color: '#333',
fontSize: 14,
borderRadius: 5,
display:'ALWAYS',
bgColor:'#FFFFFF',
padding: 6
},
})
this.markers= markers;
console.log(this.markers,8822228)
},
fail: (info) => {
//失败回调
console.log(info)
}
})
},
iconPath: '../../static/images/dingwei.png', //显示的图标
这图片你有?
请问解决了吗?我也碰到了,求解
@唏嘘 这是地图的组件 点击静态地图跳转到这个地图页面 查看周边配套设施
<template> <view class="map_page" :style="{height: windowHeight + 'px'}"> <map id="myMap" :latitude="location.latitude" :longitude="location.longitude" :markers="markers"></map> <view> <view v-for="(item,index) in searchArr" :key="index" class="map_choose" @tap="chooseType(index)"> <view :class="active === index ? 'active' : ''"></view> <text :class="active === index ? 'font_active' : ''">{{item.type}}</text> </view> </view> </view> </template> <script> import QQMapWX from '../../common/libs/qqmap-wx-jssdk.js'; export default{ data(){ return{ location: { longitude: '', //经度 latitude: '', //纬度 }, markers:[], active: 0, searchArr:[ { type: '公交', name: 'gongjiao' }, // { // type: '地铁', // name: 'ditie' // }, { type: '银行', name: 'yinhang' }, // { // type: '学校', // name: 'xuexiao' // }, { type: '医院', name: 'yiyuan' }, { type: '购物', name: 'gouwu' }, { type: '美食', name: 'meishi' } ], Tmap:null, pixelRatio: 3, xqName:'', windowHeight: 0 } }, onShow() { uni.getSystemInfo({ success: (res) => { this.windowHeight = res.windowHeight; console.log("屏幕宽度:"+res.screenWidth); console.log("屏幕高度:"+res.screenHeight); console.log("可使用窗口宽度:"+res.windowWidth); console.log("可使用窗口高度:"+res.windowHeight); } }); }, onLoad(option) { this.location.longitude = option.location.split(',')[0]; this.location.latitude = option.location.split(',')[1]; this.xqName = option.xqName; this.Tmap = new QQMapWX({ key: 'EQ5BZ-KSBKR-EPXWY-WCKBH-PWQ5V-IABOG' }); this.getPixelRatio(); }, methods:{ getPixelRatio(){ uni.getSystemInfo({ success:(data) => { console.log(data,111) this.pixelRatio = data.pixelRatio; this.getPoi(this.searchArr[0]); } }) }, getPoi(item){ this.markers = []; this.Tmap.getSuggestion({ keyword: item.type, location: `${this.location.latitude},${this.location.longitude}`, success:(data) => { const reqData = data.data; let markers = []; if(reqData.length === 0) { uni.showToast({ title: '该小区附近暂无'+item.type, duration: 2000, icon: 'none' }); }else{ markers= reqData.map(i => ({ id:i.id, latitude: i.location.lat, longitude: i.location.lng, iconPath: `../../static/mapIcon/dingwei-${item.name}@${this.pixelRatio}x.png`, // #ifdef H5 iconPath: `/static/mapIcon/dingwei-${item.name}@2x.png`, // #endif width: 28, height: 28, })) } markers.push({ latitude: this.location.latitude, //纬度 longitude: this.location.longitude, //经度 iconPath: '/static/images/dingwei.png', //显示的图标 title: '', //标注点名 callout: { //自定义标记点上方的气泡窗口 点击有效 content: this.xqName, color: '#333', fontSize: 14, borderRadius: 5, display:'ALWAYS', bgColor:'#FFFFFF', padding: 6 }, }) this.markers= markers; console.log(this.markers,8822228) }, fail: (info) => { //失败回调 console.log(info) } }) }, chooseType(index){ if(this.active === index) return; this.active = index; this.getPoi(this.searchArr[index]); } } } </script> <style lang="scss"> // 二倍图和三倍图 @mixin localBgImg($name) { background-repeat: no-repeat; background-size: cover; background-image: url('../../static/mapIcon/' + $name + "@2x.png"); @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){ background-image: url('../../static/mapIcon/' + $name + "@3x.png") } } .map_page{ /* #ifdef MP */ height: 100vh; /* #endif */ /* #ifdef H5 */ // height: calc(100vh - 50px); /* #endif */ margin-bottom: 20rpx; display: flex; flex-direction: column; >map{ flex:1; width: 750rpx; } >view{ height: 98rpx; padding: 14rpx 30rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; background-color:#FFFFFF; >view{ display: flex; flex-direction: column; justify-content: center; align-items: center; >view{ width: 50rpx; height: 50rpx; } >text{ color: #BBBBBB; font-size: 20rpx; } .font_active{ color: $uni-text-color-red; } } >view:nth-child(1){ >view{ @include localBgImg('subway'); &.active{ @include localBgImg('subway-active') } } } >view:nth-child(2){ >view{ @include localBgImg('bus'); &.active{ @include localBgImg('bus-active') } } } >view:nth-child(3){ >view{ @include localBgImg('bank'); &.active{ @include localBgImg('bank-active') } } } >view:nth-child(4){ >view{ @include localBgImg('school'); &.active{ @include localBgImg('school-active') } } } >view:nth-child(5){ >view{ @include localBgImg('hospital'); &.active{ @include localBgImg('hospital-active') } } } >view:nth-child(6){ >view{ @include localBgImg('shop'); &.active{ @include localBgImg('shop-active') } } } >view:nth-child(7){ >view{ @include localBgImg('food'); &.active{ @include localBgImg('food-active') } } } } } </style>