百度地圖api之固定標記點跳動,點選顯示詳情
阿新 • • 發佈：2019-01-22
一.首先引入所申請的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(); }});