百度地圖api2.0體驗

標籤：c   style   class   blog   code   java   

前言：這兩天在做百度地圖的功能，查看了百度官網的api完成了準系統

api地址http://developer.baidu.com/map/jshome.htm 注意是javascript API 福士版2.0

廢話不說先 

 

一、匯入百度地圖api

<script type="text/javascript" src="/Scripts/jquery.min.js"></script>

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

二、載入百度地圖

<style type="text/css">#allmap {width: 530px;height: 500px;overflow: hidden;margin:0;}</style> <div id="allmap"></div><script type="text/javascript">     var map;// 百度地圖API功能map = new BMap.Map("allmap");map.addControl(new BMap.NavigationControl()); //地圖平移縮放控制項map.addControl(new BMap.ScaleControl()); //比例尺控制項//map.addControl(new BMap.OverviewMapControl()); //縮減地圖控制項，預設位於地圖右下方，是一個可摺疊的縮減地圖//map.addControl(new BMap.MapTypeControl()); //地圖類型控制項//地圖中心var point = new BMap.Point(pointArray[0].lon, pointArray[0].lat);map.centerAndZoom(point, 10);//層級map.enableScrollWheelZoom(true);//是否可縮放//點擊地圖彈出座標// map.addEventListener("click", function(e){// alert(point.lng + ", " + e.point.lat);// });

 

 

三、增加標註marker

 

//自訂方法function addMarker(mobj,html) {var mName = mobj.mName, //標題isOnline = mobj.isOnline;//是否線上var point = new BMap.Point(mobj.lon, mobj.lat);if(0 == isOnline) //離線用灰色表徵圖顯示{var myIcon = new BMap.Icon("/Content/img/bdmap/marker_gray_sprite.png", new BMap.Size(19,25) ,{anchor: new BMap.Size(9,25),infoWindowAnchor: new BMap.Size(10, 0)});  // {offset: new BMap.Size(50, -50) ,{anchor: new BMap.Size(10,25)}var marker = new BMap.Marker(point,{icon:myIcon});}else{//線上用預設紅色表徵圖顯示//var myIcon = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(39,25) ,{anchor: new BMap.Size(10,0)} ); //{offset: new BMap.Size(50, -50)var marker = new BMap.Marker(point);}//設定資訊var infoWindow = new BMap.InfoWindow(tip); // 建立資訊視窗對象map.addOverlay(marker);marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow);//圖片載入完畢重繪infowindowdocument.getElementById(‘imgDemo‘).onload = function (){infoWindow.redraw(); //防止在網速較慢，圖片未載入時，產生的資訊框高度比圖片的總高度小，導致圖片部分被隱藏}});//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫var label = new BMap.Label(mName,{offset:new BMap.Size(20,-10)});label.setStyle({borderColor:"#808080",color:"#333",cursor:"pointer",fontSize:"14px",backgroundColor:"#DEADFF"});label.addEventListener("click", function(){ marker.openInfoWindow(infoWindow);}); marker.setLabel(label);} 這樣就可以迴圈增加marker了     for (var i = 0; i < pointArray.length; i++) {            var mtip = getInfoTip(pointArray[i]); //提示html            addMarker(pointArray[i],mtip);//添加marker    }

 

 

四、點擊其他地方顯示提示框的方法

$(function () {$("#showTip").click(function () {$("#mapName").text($(this).find("div[name=‘mname‘]").text());var id = $(this).find("div[name=‘mid‘]").text();var tempModel = getMModel(id);if(tempModel != null){var mpoint = new BMap.Point(tempModel.lon, tempModel.lat);map.panTo(mpoint);var infoWindow = new BMap.InfoWindow(tempModel.infoWindowHtml,{offset:new BMap.Size(0,-25)}); // 建立資訊視窗對象InfoWindowOptionsmap.openInfoWindow(infoWindow,mpoint);//圖片載入完畢重繪infowindowdocument.getElementById(‘imgDemo‘).onload = function (){infoWindow.redraw(); //防止在網速較慢，圖片未載入時，產生的資訊框高度比圖片的總高度小，導致圖片部分被隱藏}}else{    $("#mapName").text("在地圖中未找到該商家,請查看是否設定了座標");}});});

 

 

 

OK,大功告成！

有用到的小夥伴可以直接copy了