<!-- static/map.
html -->
<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>高德
地图</title>
<script src="https
://webapi.amap.com/loader.js"></script>
<script src="https
://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<style>
#map-container {
width
: 100%;
height
: 584px;
border-radius
: 22px;
z-index
: 4;
}
</style>
</head>
<body>
<div id="map-container"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode
: 'cf331d54f67e306ca5c0b17f7122d559'
};
</script>
<script src="https
://webapi.amap.com/maps?v=2.0&key=f3323c24769b10828db07f07c0fcec0d&plugin=AMap.MarkerCluster">
</script>
<script>
// 解析
URL参数
const params = new
URLSearchParams
(location.search
);
const points = JSON.parse
(params.get
('points'
));
const markers = JSON.parse
(params.get
('markers'
));
// 初始化
地图
const map = new AMap.Map
('map-container', {
zoom
: 10,
center
: [points[0].lng, points[0].lat],
pitch
: 45,
showBuildingBlock
: true
}
);
markers.forEach
(marker => {
new AMap.Marker
({
position
: [marker.lng, marker.lat],
title
: marker.title,
map
: map
}
).on
('click',
() => {
// 向UniApp发送点击事件
window.parent.postMessage
({
type
: 'markerClick',
title
: marker.title
}, '*'
);
}
);
}
);
//构建带标题的
HTML内容
markers.forEach
(marker => {
// 构建
HTML内容（包含
图片和标题）
const content = `
<div style="position
:relative; text-align
:center;">
<img src="/static/images/flag.png"
style="width
:40px; height
:50px; display
:block;">
<div style="position
:absolute; bottom
:-90%; left
:0%; transform
:translateX
(-50%
);
background
: linear-gradient
(180deg, rgba
(227, 57, 59, 0.2
) 0%, rgba
(244, 124, 88, 0.2
) 100%
); padding
:6px 0;
border-radius
: 18px; white-space
:wrap;
font-family
:ShuHuiTi; font-size
: 12px;font-weight
: bold;
margin-top
:5px;border
: 2px solid #F47C58;color
:#E4393C;width
:80px;">
${marker.title}
</div>
</div>
`;
const markerObj = new AMap.Marker
({
position
: [marker.lng, marker.lat],
content
: content, // 使用
HTML内容
anchor
: 'bottom-center', // 锚点在底部中心
offset
: new AMap.Pixel
(0, -25
) // 向上偏移
}
);
markerObj.on
('click',
() => {
console.log
(marker, '111'
);
// 将数据转为字符串
const message = JSON.stringify
({
type
: 'markerClick',
title
: marker.title
}
);
window.parent.postMessage
(message, '*'
);
}
);
map.add
(markerObj
);
}
);
// 准备聚合数据
const clusterPoints = markers.map
(marker =>
({
lnglat
: [marker.lng, marker.lat],
title
: marker.title,
originalData
: marker // 保留原始数据
}
));
// 点聚合初始化函数
function initCluster
() {
const cluster = new AMap.MarkerCluster
(map, clusterPoints, {
gridSize
: 80,
maxZoom
: 15,
minClusterSize
: 2,
renderClusterMarker
: function
(context
) {
const count = context.count;
// 根据聚合点数量计算大小
const div = document.createElement
('div'
);
div.className = 'cluster-marker';
div.style.backgroundColor = 'rgba
(255,153,0,0.6
)';
div.style.border = '1px solid rgba
(255,153,0,1
)';
div.style.borderRadius = '50%';
div.style.color = '#fff';
div.style.textAlign = 'center';
div.style.lineHeight = '40px';
div.style.width = '40px';
div.style.height = '40px';
div.inner
HTML = count;
return div;
},
// 1. 添加标记点
renderMarker
: function
(context
) {
const markerData = context.data[0].originalData;
// console.log
('markerData.title', markerData.title
);
const content = `
<div style="position
:relative; text-align
:center;">
<img src="/static/images/flag.png"
style="width
:40px; height
:50px; display
:block;">
<div style="position
:absolute; bottom
:-90%; left
:50%; transform
:translateX
(-50%
);
background
: linear-gradient
(180deg, rgba
(227, 57, 59, 0.2
) 0%, rgba
(244, 124, 88, 0.2
) 100%
);
padding
:6px 0;
border-radius
: 18px;
white-space
:nowrap;
font-family
:ShuHuiTi;
font-size
: 12px;
font-weight
: bold;
margin-top
:5px;
border
: 2px solid #F47C58;
color
:#E4393C;
width
:80px;">
${markerData.title}
</div>
</div>
`;
// console.log
('markerDatat', markerData
);
const markerObj = new AMap.Marker
({
position
: [markerData.lng, markerData.lat],
content
: content,
anchor
: 'bottom-center',
offset
: new AMap.Pixel
(0, -25
)
}
);
markerObj.on
('click', function
() {
window.parent.postMessage
({
type
: 'markerClick',
title
: markerData.title
}, '*'
);
}
);
return markerObj;
}
}
);
}
// 加载点聚合插件
AMap.plugin
('AMap.MarkerCluster', function
() {
initCluster
(); // 插件加载完成后执行初始化
}
);
// 2. 绘制路线
const path = points.map
(p => [p.lng, p.lat]
);
new AMap.Polyline
({
path
: path,
strokeColor
: "#3366FF",
strokeWeight
: 5,
map
: map
}
);
// 3. 添加起点终点标记
points.forEach
((point, i
) => {
new AMap.Marker
({
position
: [point.lng, point.lat],
content
: `<div class="point-label">${i === 0 ? '起'
: '终'}</div>`,
offset
: new AMap.Pixel
(-10, -10
),
map
: map
}
);
}
);
// 4. 绘制驾车
路径（如果需要，可以
注释掉直线
路径，保留驾车
路径）
// 注意：这里同时绘制了直线和驾车
路径，可能会重叠
if
(points.length >= 2
) {
AMap.plugin
('AMap.Driving',
() => {
const driving = new AMap.Driving
({
map
: map, // 这样驾车路线会直接显示在
地图上
policy
: AMap.DrivingPolicy.LEAST_TIME
}
);
driving.search
(
[points[0].lng, points[0].lat],
[points[points.length - 1].lng, points[points.length - 1].lat],
(status, result
) => {
// 可以根据结果处理
}
);
}
);
}
</script>
</body>
</
html>uniapp的vue2项目使用webview嵌套高德
地图，
地图聚合点无法正常显示，都是只有默认图标，还有
地图点击事件，无法正常回传给 <view class="description-card">
<web-view
:src="map
Url" @message="handleMessage"></web-view>
</view>// 接收WebView消息
handleMessage
(e
) {
console.log
(e, '点击了标记点'
);
// e.detail.data 是一个数组，数组的每个元素是H5发送的消息（字符串）
const [message] = e.detail.data;
try {
const data = JSON.parse
(message
);
if
(data.type === 'markerClick'
) {
// 处理标记点击
}
} catch
(e
) {
console.error
('解析消息失败', e
);
}
},
本文详细介绍了网页中iframe的灵活应用、URL参数的查询方式、路径的绝对与相对概念，以及如何利用图片地图实现高效导航。通过实例解析，帮助读者理解并掌握这些关键的网页技术。
扫一扫
1427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
