收藏
回答

急!跨端兼容H5map markers 中得iconPath 和气泡在手机上不显示?

使用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)

  }

})

},

回答关注问题邀请回答
收藏

3 个回答

  • 唏嘘
    唏嘘
    2020-04-21

    iconPath: '../../static/images/dingwei.png', //显示的图标



    这图片你有?

    2020-04-21
    有用 1
    回复 3
    • Nuyoah
      Nuyoah
      2020-04-21
      有 这个是本地的图标   iconPath: `../../static/mapIcon/dingwei-${item.name}@${this.pixelRatio}x.png`,这个是本地显示配套信息的图标
      2020-04-21
      回复
    • 唏嘘
      唏嘘
      2020-04-21回复Nuyoah
      你是webview  引入的?然后不显示?
      2020-04-21
      回复
    • Nuyoah
      Nuyoah
      2020-04-21
      不是的  以下是完整地图页面代码
      2020-04-21
      回复
  • t
    t
    2020-09-07

    请问解决了吗?我也碰到了,求解

    2020-09-07
    有用
    回复
  • Nuyoah
    Nuyoah
    2020-04-21

    @唏嘘 这是地图的组件 点击静态地图跳转到这个地图页面 查看周边配套设施

    <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>
    
    2020-04-21
    有用
    回复 2
    • 唏嘘
      唏嘘
      2020-04-21
      你这不是小程序的?   电脑能显示  是不是样式问题
      2020-04-21
      回复
    • Nuyoah
      Nuyoah
      2020-04-21回复唏嘘
      是小程序的 现在是要跨端兼容H5   微信开发者工具和使用hbuilder内置浏览器都正常 就是手机浏览器上不显示  实在不知道什么原因 网上也没有类似的例子可以参考的
      2020-04-21
      回复
登录 后发表内容
问题标签