百度地图添加标注点
2014-03-20 17:16
183 查看
新建html可直接看到效果 :注意fox.gif的路径
多个标注点的显示:
效果:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;hidden;margin:0;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=472ef16d07e7b6c70b069ea3614318cd"></script> <title>添加普通标注点</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925)); // 创建标注 map.addOverlay(marker1); // 将标注添加到地图中 //创建信息窗口 var infoWindow1 = new BMap.InfoWindow("普通标注"); marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);}); //创建小狐狸 var pt = new BMap.Point(116.417, 39.909); var myIcon = new BMap.Icon("fox.gif", new BMap.Size(300,157)); var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注 map.addOverlay(marker2); // 将标注添加到地图中 //让小狐狸说话(创建信息窗口) var infoWindow2 = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈,你看见我啦!我可不常出现哦!</p><p style='font-size:14px;'>赶快查看源代码,看看我是如何添加上来的!</p>"); marker2.addEventListener("click", function(){this.openInfoWindow(infoWindow2);}); </script>
多个标注点的显示:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;hidden;margin:0;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=472ef16d07e7b6c70b069ea3614318cd"></script> <title>添加普通标注点</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 编写自定义函数,创建标注 function addMarker(point){ var marker = new BMap.Marker(point); map.addOverlay(marker); } // 随机向地图添加25个标注 var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat); for (var i = 0; i < 25; i ++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); addMarker(point); } </script>
效果:
相关文章推荐
- 项目中的百度地图添加标注,动态弹框
- 百度地图自定义大头针图片和添加标注
- 调取百度地图接口,实现取自己的实时位置,然后可以在百度地图上添加信息标注
- 百度地图之地址解析和浏览器定位以及添加可拖拽标注
- iOS - 百度地图最基本操作(定位,手势添加自定义标注)
- 百度地图标注点上添加数字
- 百度地图上面添加新的标注 设置中心点
- iOS-百度地图添加标注自定义气泡
- iOS 之 使用百度地图 (删除地图页面所有自己添加的标注)
- 百度地图:为标记添加点击事件显示标注
- 创建百度地图,设置地图缩放,设置标注,添加信息窗口
- 百度地图添加标注点
- iOS Swift百度地图 添加多个标注
- 点击百度地图添加标注并获取当前地理名称
- 添加到网站上的百度地图,标注图标不显示
- 百度地图开发-添加图文的标注功能
- 百度地图上自定义添加一个标注
- 百度地图添加带数字标注