高德地图显示自定义信息窗体
<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>自定义窗体</title> <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的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 = '<h3>我是第' + (i + 1) + '个XXX</h3>'; marker.content += '<div>经度：'+lnglats[i][0]+'</div>'; marker.content += '<div>纬度：'+lnglats[i][1]+'</div>'; marker.content += '<div><button class="btn btn-suucess btn-xs">历史轨迹</button>'; marker.content += ' <button class="btn btn-warning btn-xs">实时跟踪 </button>'; marker.content += ' <button class="btn btn-danger btn-xs">设置</button></div>'; marker.on('click', markerClick); marker.emit('click', {target: marker}); } function markerClick(e) { infoWindow.setContent(e.target.content); infoWindow.open(map, e.target.getPosition()); } map.setFitView();</script></body></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow