百度地图api之固定标记点跳动,点击显示详情

一.首先引入所申请的ak密钥

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&v=2.0&services=false"></script> 

二.简单样式处理一下

body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;}

三.html代码布局

//下面的代码是用来显示地图的

<div id="allmap"></div>

四.js代码如下

//创建Map地图实例

var map = new BMap.Map("allmap");

//设置中心点坐标--固定的位置--7号线大郊亭--金海国际

var point = new BMap.Point(116.498752,39.900157);

//map.enableScrollWheelZoom(true);

//启用滚轮放大缩小，默认禁用

map.enableScrollWheelZoom();

//启用地图惯性拖拽，默认禁用

map.enableContinuousZoom();

map.centerAndZoom(point, 15);

//添加默认缩放平移控件

map.addControl(new BMap.NavigationControl()); 

//单独设定图标的样式

var icon = new BMap.Icon('http://wx.58haha.cn/1.png', new BMap.Size(20, 32), {

anchor: new BMap.Size(10, 30)

});

var marker = new BMap.Marker(new BMap.Point(116.498752,39.900157), {

icon: icon

});

// 创建标注

//var marker = new BMap.Marker(point);

// 将标注添加到地图中

map.addOverlay(marker);

//跳动的动画

marker.setAnimation(BMAP_ANIMATION_BOUNCE); 

//创建信息窗口

var sContent ="<div class='myclass'>公司:江尊少网络科技 <br>地址:北京市朝阳区广渠路21号金海国际B208<br>手机：182-1060-5516<br><img src='http://app.baidu.com/map/images/tiananmen.jpg'></div>";

// 创建信息窗口对象

var infoWindow = new BMap.InfoWindow(sContent);

map.centerAndZoom(point, 15);

//标注点添加到页面

map.addOverlay(marker);

//点击事件监听

marker.addEventListener("click", function(){          

   this.openInfoWindow(infoWindow);

   //图片加载完毕重绘infowindow

   document.getElementById('imgDemo').onload = function (){

  infoWindow.redraw();

   }

});