高德地图API 简单使用

时间:2023-03-09 05:41:55
高德地图API 简单使用

主要是功能是 在地图上添加标记点、在标记点添加相应的内容、单击查看内容、双击直接进入相应的项目系统。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=您的密匙"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div> <script type="text/javascript">
//初始化地图对象,加载地图
var map = new AMap.Map("container", {resizeEnable: true});
var lnglats = [
[116.368904, 39.923423],
[116.382122, 39.921176],
[116.387271, 39.922501],
[116.398258, 39.914600]
];
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) }); for (var i = 0, marker; i < lnglats.length; i++) {
var marker = new AMap.Marker({
position: lnglats[i],
map: map
});
marker.content = '桥梁第' + (i + 1) + '座';
marker.on('click', markerClick);
marker.on('dblclick', markerClickDouble);
// marker.emit('click', {target: marker});
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition()); } function markerClickDouble(e) {
alert(e.target.getPosition());
}
map.setFitView();
</script>
</body>
</html>

运行效果
高德地图API 简单使用