主要是功能是 在地图上添加标记点、在标记点添加相应的内容、单击查看内容、双击直接进入相应的项目系统。
<!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>
运行效果