
- 发布:2023-06-08 15:00
- 更新:2023-06-12 18:28
- 阅读:313
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: window10
HBuilderX类型: 正式
HBuilderX版本号: 3.8.4
手机系统: 全部
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<template>
<view class="Index">
<view class="header-box" :style="{paddingTop:`${padTop}rpx`}">
<view class="">12</view>
</view>
<view class="map-box">
<map id="map" ref="map" class="map" :scale="16" :longitude="longitude" :latitude="latitude" :markers="markers"
:enable-zoom="true">
<cover-view slot="callout">
<template>
<cover-view :marker-id="1">
<cover-image style="width: 80rpx;height: 80rpx;" :src="bgUrl"></cover-image>
<cover-image style="width: 40rpx;height: 40rpx;margin-top: -40rpx;margin-left: 40rpx;"
:src="ava"></cover-image>
</cover-view>
</template>
</cover-view>
</map>
<cover-view class="ba-guan-box"></cover-view>
</view>
</view>
</template>
<script>
import gcoord from 'gcoord';
import config from "@/utils/config.js"
export default {
data() {
var result = gcoord.transform(
[120.303728, 31.581129], // 经纬度坐标
gcoord.Baidu, // 当前坐标系
gcoord.GCJ02 // 目标坐标系
);
const sysInfo = uni.getSystemInfoSync();
return {
padTop: sysInfo.statusBarHeight * 2,
latitude: result[1],
longitude: result[0],
bgUrl: `${config.imgHost}acc_tab4.png`,
ava: `${config.imgHost}into_page.png`,
width: 0,
height: 0,
markers: [{
id: 1,
title: "测试1",
latitude: result[1],
longitude: result[0],
iconPath: "../../static/1.png",
width: 1,
height: 1,
joinCluster: true,
anchor: {
x: 0.5,
y: 0.5
},
customCallout: {
display: 'ALWAYS',
anchorX: 0.5,
anchorY: 0.5,
}
}]
}
},
onLoad() {},
onReady() {
let map = uni.createMapContext("map", this);
uni.getLocation({
success(res) {
var result = gcoord.transform(
[res.longitude, res.latitude], // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.GCJ02 // 目标坐标系
);
console.log(result);
map.moveToLocation({
longitude: result[0],
latitude: result[1]
})
}
})
// map.addMarkers({
// markers: []
// })
},
methods: {
}
}
</script>
<style>
/* #ifdef MP */
page {
height: 100%;
}
.Index {
height: 100%;
}
.map-box {
height: 0;
flex: 1;
}
/* #endif */
.Index {
flex: 1;
}
.header-box {
width: 750rpx;
height: 200rpx;
background-color: red;
box-sizing: content-box;
}
.map-box {
position: relative;
flex: 1;
background-color: yellow;
}
.ba-guan-box {
position: absolute;
width: 705rpx;
left: 22.5rpx;
bottom: 20rpx;
height: 200rpx;
background-color: #fff;
border-radius: 20rpx;
}
.map {
width: 750rpx;
flex: 1;
}
</style>
<template>
<view class="Index">
<view class="header-box" :style="{paddingTop:`${padTop}rpx`}">
<view class="">12</view>
</view>
<view class="map-box">
<map id="map" ref="map" class="map" :scale="16" :longitude="longitude" :latitude="latitude" :markers="markers"
:enable-zoom="true">
<cover-view slot="callout">
<template>
<cover-view :marker-id="1">
<cover-image style="width: 80rpx;height: 80rpx;" :src="bgUrl"></cover-image>
<cover-image style="width: 40rpx;height: 40rpx;margin-top: -40rpx;margin-left: 40rpx;"
:src="ava"></cover-image>
</cover-view>
</template>
</cover-view>
</map>
<cover-view class="ba-guan-box"></cover-view>
</view>
</view>
</template>
<script>
import gcoord from 'gcoord';
import config from "@/utils/config.js"
export default {
data() {
var result = gcoord.transform(
[120.303728, 31.581129], // 经纬度坐标
gcoord.Baidu, // 当前坐标系
gcoord.GCJ02 // 目标坐标系
);
const sysInfo = uni.getSystemInfoSync();
return {
padTop: sysInfo.statusBarHeight * 2,
latitude: result[1],
longitude: result[0],
bgUrl: `${config.imgHost}acc_tab4.png`,
ava: `${config.imgHost}into_page.png`,
width: 0,
height: 0,
markers: [{
id: 1,
title: "测试1",
latitude: result[1],
longitude: result[0],
iconPath: "../../static/1.png",
width: 1,
height: 1,
joinCluster: true,
anchor: {
x: 0.5,
y: 0.5
},
customCallout: {
display: 'ALWAYS',
anchorX: 0.5,
anchorY: 0.5,
}
}]
}
},
onLoad() {},
onReady() {
let map = uni.createMapContext("map", this);
uni.getLocation({
success(res) {
var result = gcoord.transform(
[res.longitude, res.latitude], // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.GCJ02 // 目标坐标系
);
console.log(result);
map.moveToLocation({
longitude: result[0],
latitude: result[1]
})
}
})
// map.addMarkers({
// markers: []
// })
},
methods: {
}
}
</script>
<style>
/* #ifdef MP */
page {
height: 100%;
}
.Index {
height: 100%;
}
.map-box {
height: 0;
flex: 1;
}
/* #endif */
.Index {
flex: 1;
}
.header-box {
width: 750rpx;
height: 200rpx;
background-color: red;
box-sizing: content-box;
}
.map-box {
position: relative;
flex: 1;
background-color: yellow;
}
.ba-guan-box {
position: absolute;
width: 705rpx;
left: 22.5rpx;
bottom: 20rpx;
height: 200rpx;
background-color: #fff;
border-radius: 20rpx;
}
.map {
width: 750rpx;
flex: 1;
}
</style>
操作步骤:
同上
同上
预期结果:
双指缩放时自定义的markers的位置不要乱飞
双指缩放时自定义的markers的位置不要乱飞
实际结果:
双指缩放时自定义的markers的位置乱飞了
双指缩放时自定义的markers的位置乱飞了
6***@qq.com (作者)
上面的代码,图片的宽高是写死的,那锚点如何设置呢?
2023-06-14 17:20
DCloud_iOS_XHY
回复 6***@qq.com: 上传一个完整的示例工程,我看一下
2023-06-15 20:54