百度API应用

来源：互联网发布：腾讯软件测试待遇编辑：程序博客网时间：2024/06/11 11:20

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "Times New Roman", Times, serif;
}
.div1{
width: 150px;
height: 500px;
border: 1px;
float: left;
position: relative;
left: -80px;
margin-left: 80px
}
.div2{
width: 600px;
height: 500px;
border: #ccc solid 1px;
float: left;
position: relative;
left: -80px
}
    </style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0
614bf7aefe0ba562f8cf87194&v=1.0&services=false"></script>//百度API接口入口
<title>地图展示</title>
</head>

<body>
<div>//左侧的标注信息列表
<div class="div1" style="solid gray" id="info">
<tr>
<td><p style="font-size: 14px; font-style: normal;"><img src="./images/0.jpg">山东大学（威海）国际学术交流中心</p>
    </td>
</tr>
<tr>
<td><p style="font-size: 14px; font-style: normal;"><img src="./images/a.jpg">威海北站</p>
   </td>
</tr>
<tr>
<td><p style="font-size: 14px; font-style: normal;"><img src="./images/b.jpg">威海站</p>
    </td>
</tr>
<tr><td><p style="font-size: 14px; font-style: normal;"><img src="./images/c.jpg">威海国际机场</p>
    </td>
</tr>
</div>
//百度地图
<div class="div2" style="" id="container"></div>
</div>
</body>
</html>

var Icon1 = new BMap.Icon("./images/0.jpg", new BMap.Size(28, 45));
var Icon2 = new BMap.Icon("./images/a.jpg", new BMap.Size(28, 45));
var Icon3 = new BMap.Icon("./images/b.jpg", new BMap.Size(28, 45));
var Icon4 = new BMap.Icon("./images/c.jpg", new BMap.Size(28, 45));

var marker1 = new BMap.Marker(p1, {icon: Icon1});
var marker2 = new BMap.Marker(p2, {icon: Icon2});
var marker3 = new BMap.Marker(p3, {icon: Icon3});
var marker4 = new BMap.Marker(p4, {icon: Icon4});

markers = [marker1, marker2, marker3, marker4];
for(i=0;i<points.length;i++)
{
map.addOverlay(markers[i]); // 将标注添加到地图中
}

<!--var myPushpin = new BMap.PushpinTool(map);          // 创建标注工具实例
myPushpin.addEventListener("markend", function(e){ // 监听事件，提示标注点坐标信息
alert("您标注的位置：" +
  e.marker.getPoint().lng + ", " +
        e.marker.getPoint().lat);
});
myPushpin.open();                                   // 开启标注工具 --!>
</script>

0 0