百度/高德地图多点标注，多个信息窗口

原创

已于 2024-06-17 15:33:46 修改 · 1.1k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #前端

于 2024-06-17 15:26:41 首次发布

效果：

1.百度地图

百度地图多点标注，多个信息窗口

2.高德地图

高德地图多点标注，多个信息窗口

说明：前面用的百度，后面英文站没找到百度的英文版改了高德；
如果客户没有特别要求可以直接使用高德，高德有语言切换就不用写两遍了；
只一点建议看需求来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地图多点标注</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style>
			body{
     
     width: 100%;box-sizing: border-box;padding: 1px 0;height: auto;}
			.mapwrap{
     
     width: 60%;height: 400px;position: relative;margin: 50px auto;}
			.mapcont{
     
     width: 100%;height: 100%;}
			/*.amap-icon*/
			.amap-icon img{
     
     transform:scale(0.6);}
			.amap-info-content p{
     
     font-size: 14px;line-height: 24px;color: #333333;}
			.amap-info-content p span{
     
     font-size: 18px;color: #333333;font-weight: bold;text-align: center;margin-bottom: 20px;}
			.amap-info-content{