百度地图添加图标的方法下面是通用的就不说了
var map = new BMap.Map("allmap", { minZoom: 12, maxZoom: 18 }); // 创建Map实例,设置地图允许的最小/大级别 var point = new BMap.Point(113.988696,22.979988); map.centerAndZoom(point, 18);
然后图标
var myIcon = new BMap.Icon("basic/images/us_mk_icon.png", new BMap.Size(30,30));
接着定义
var marker = new BMap.Marker(point,{icon:myIcon});
然后把图标输入百度地图
map.addOverlay(marker);
好了就行了!
或者我们还可以加个信息窗口
var opts = { width: 200, // 信息窗口宽度 height: 100, // 信息窗口高度 title: "信息窗口", // 信息窗口标题 enableMessage: true, //设置允许信息窗发送短息 } var infoWindow = new BMap.InfoWindow("电话什么东西之类的", opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); //开启信息窗口 map.enableScrollWheelZoom(true); //是否允许缩放
好了可以了!试下吧!
完整代码示例
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=5fRUbGCLuEa5MyCyDhWZOsgq6ySAymoN"></script> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap", { minZoom: 12, maxZoom: 18 }); // 创建Map实例,设置地图允许的最小/大级别 var point = new BMap.Point(112.944332,28.357452); var points = new BMap.Point(112.943827,28.357088);//设置自定义图片的坐标 map.centerAndZoom(point, 18); var myIcon = new BMap.Icon("/basic/images/maptb.png", new BMap.Size(60,90));//设置自定义图片 var marker = new BMap.Marker(points,{icon:myIcon}); // 创建标注 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 map.addOverlay(marker); var opts = { title: "健康兔板材", // 信息窗口标题 enableMessage: true, //设置允许信息窗发送短息 } var infoWindow = new BMap.InfoWindow("健康兔板材"); // 创建信息窗口对象 map.disableScrollWheelZoom();//禁止缩放 map.openInfoWindow(infoWindow, point); //开启信息窗口 marker.addEventListener("click", function(){ map.openInfoWindow(infoWindow, point); //开启信息窗口 }) </script>