<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图示例</title>
<style>
.map {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div class="map">
<p>121.329227,31.23992</p>
<p>公司总部</p>
<p>上海市嘉定区江桥镇沙河路337号1_203室J</p>
</div>
<div class="map">
<p>106.304852,38.720405</p>
<p>宁夏工厂</p>
<p>宁夏贺兰工业园区暖泉龙翔新材料孵化园东区16号厂房</p>
</div>
<script src="https://webapi.amap.com/maps?v=2.0&key=1aa49e10cb21099cf50b44e526cdc264"></script>
<script src="https://releases.jquery.com/git/jquery-git.min.js"></script>
<script>
$(".map").each(function(i) {
let point = $(this).find("p").eq(0).text().trim().split(",").map(a => +a);
let name = $(this).find("p").eq(1).text().trim();
let address = $(this).find("p").eq(2).text().trim();
$(this).find("p").remove();
let map = new AMap.Map(this, {
zoom: 15,
center: point,
viewMode: '2D'
});
let marker = new AMap.Marker({
position: point,
title: name
});
map.add(marker);
let infoWindow = new AMap.InfoWindow({
content: '<div style="padding:5px;">'+address+'</div>',
offset: new AMap.Pixel(0, -30)
});
marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});
});
</script>
</body>
</html>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
/* 示例代码 */
body {
text-align: center;
}
i {
color: #777;
}