<view class="page-section page-section-gap page">
<map
id="map1"
ref="map1"
style="width: 750upx; height: 80vh;"
:enable-satellite="true"
:show-compass="true"
:scale="scale"
:latitude="latitude"
:longitude="longitude"
>
<cover-image @click="clickReset" class="coverImg" src="/static/ic_my_loc.png"></cover-image>
</map>
Ios,H5可以正常显示,android显示不出来, 图片在static下
完整代码
<template>
<view>
<u-navbar title="工地考勤" :is-back="false"></u-navbar>
<view>
<view class="page-body">
<view class="page-section page-section-gap page">
<map
id="map1"
ref="map1"
style="width: 750upx; height: 80vh;"
:enable-satellite="true"
:show-compass="true"
:scale="scale"
:latitude="latitude"
:longitude="longitude"
>
<cover-image @click="clickReset" class="coverImg" src="/static/ic_my_loc.png"></cover-image>
</map>
</view>
</view>
</view>
<view>{{ locText }}</view>
</view>
</template>
<script>
import bundleIdentifier from '@/common/bundleIdentifier.js';
export default {
data() {
return {
id: 0,
latitude: 39.909,
longitude: 116.39742,
scale: 17,
winHeight: 0,
locText: ''
};
},
onLoad() {
var that = this;
uni.getSystemInfo({
success: function(res) {
that.winHeight = res.windowHeight - that.CustomBar;
}
});
setTimeout(function() {
that.initMap();
}, 500);
var view = new plus.nativeObj.View('ivLoc', {
bottom: '25%',
left: '2%',
height: '25px',
width: '25px'
});
view.draw([{ tag: 'img', id: 'img', src: '/static/ic_my_loc.png', position: { bottom: '0px', left: '0px', width: '100%', height: '100%' } }]);
view.addEventListener(
'click',
function() {
that.clickReset();
},
false
);
view.show();
},
methods: {
IsPtInPoly(o, l) {
var t = l.getPath();
var h = t.length;
var n = true;
var j = 0;
var g = 2e-10;
var s, q;
var e = o;
s = t[0];
for (var f = 1; f <= h; ++f) {
if (e.equals(s)) {
return n;
}
q = t[f % h];
if (e.latitude < Math.min(s.latitude, q.latitude) || e.latitude > Math.max(s.latitude, q.latitude)) {
s = q;
continue;
}
if (e.latitude > Math.min(s.latitude, q.latitude) && e.latitude < Math.max(s.latitude, q.latitude)) {
if (e.longitude <= Math.max(s.longitude, q.longitude)) {
if (s.latitude == q.latitude && e.longitude >= Math.min(s.longitude, q.longitude)) {
return n;
}
if (s.longitude == q.longitude) {
if (s.longitude == e.longitude) {
return n;
} else {
++j;
}
} else {
var r = ((e.latitude - s.latitude) * (q.longitude - s.longitude)) / (q.latitude - s.latitude) + s.longitude;
if (Math.abs(e.longitude - r) < g) {
return n;
}
if (e.longitude < r) {
++j;
}
}
}
} else {
if (e.latitude == q.latitude && e.longitude <= q.longitude) {
var m = t[(f + 1) % h];
if (e.latitude >= Math.min(s.latitude, m.latitude) && e.latitude <= Math.max(s.latitude, m.latitude)) {
++j;
} else {
j += 2;
}
}
}
s = q;
}
if (j % 2 == 0) {
return false;
} else {
return true;
}
},
initMap(callBack) {
var that = this;
var mapContent = uni.createMapContext('map1', this);
if (mapContent && mapContent.$getAppMap()) {
//绘制打开范围
mapContent.$getAppMap().clearOverlays();
// var points = new Array(
// this.bd2gcjString(116.1820943298403, 39.750488978269416),
// this.bd2gcjString(116.19165426654206, 39.750488978269416),
// this.bd2gcjString(116.19165426654206, 39.74736124994377),
// this.bd2gcjString(116.1820943298403, 39.74736124994377)
// );
var points = new Array(
new plus.maps.Point(116.1820943298403, 39.750488978269416),
new plus.maps.Point(116.19165426654206, 39.750488978269416),
new plus.maps.Point(116.19165426654206, 39.74736124994377),
new plus.maps.Point(116.1820943298403, 39.74736124994377)
);
var polygonObj = new plus.maps.Polygon(points);
polygonObj.setStrokeColor('#0199FE');
polygonObj.setFillColor('#66faff');
polygonObj.setFillOpacity(0.5);
polygonObj.setLineWidth(3);
mapContent.$getAppMap().addOverlay(polygonObj);
//获取个人位置
mapContent.$getAppMap().getUserLocation(function(state, point) {
if (0 == state) {
that.latitude = point.latitude;
that.longitude = point.longitude;
var markObj = new plus.maps.Marker(point);
markObj.setIcon('static/ic_baidu_local.png');
markObj.setLabel('当前所在位置');
var bubble = new plus.maps.Bubble('当前所在位置');
markObj.setBubble(bubble);
mapContent.$getAppMap().addOverlay(markObj);
//判断是否在打卡范围内
if (that.IsPtInPoly(point, polygonObj)) {
that.locText = '在范围内';
} else {
that.locText = '在范围外';
}
}
if (callBack) {
callBack(mapContent);
}
});
}
},
bd2gcjString(latitude, longitude) {
var x_pi = (3.14159265358979324 * 3000.0) / 180.0;
var x = latitude - 0.0065,
y = longitude - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
return new plus.maps.Point(z * Math.cos(theta), z * Math.sin(theta));
},
clickReset() {
var that = this;
that.initMap(function(mapContent) {
if (mapContent) {
that.scale = 17;
mapContent.$getAppMap().setZoom(17);
}
});
}
}
};
</script>
<style>
.map {
width: 100%;
height: 400px;
}
.page {
display: flex;
justify-content: center;
}
.controls-title {
width: 100%;
color: #000000;
position: absolute;
left: 100upx;
top: 100upx;
height: 100upx;
}
.coverImg {
width: 60upx;
height: 60upx;
bottom: 150upx;
left: 20upx;
background-color: #ffffff;
border-radius: 15upx;
position: absolute;
}
</style>
卢融霜_ (作者)
把显示时间延迟,是怎么操作呢?使用 v-show吗?我使用v-show还是没有显示出来。
>
<cover-image v-show="showView" @click="clickReset" class="coverImg" src="/static/ic_my_loc.png"></cover-image>
</map>
setTimeout(function() {
that.showView = true;
}, 3000);
2021-05-11 16:32