百度地圖-自定義mark以及為其新增資訊搜尋視窗
阿新 • • 發佈：2019-02-11
最近專案中要百度地圖，學習了一下，以下是個簡單的案例
廢話不多說，直接貼程式碼：
注：這裡使用了lable作為標註，在其監聽事件上開啟搜尋視窗。座標形式為百度座標。<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} #allmap{height:560px;width:100%;} #r-result{width:100%;} .anchorBL{display:none} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的key"></script> <script type="text/javascript" src="<%=path%>/scripts/map/SearchInfoWindow_min.js"></script> <script type="text/javascript" src="<%=path%>/scripts/easyui/jquery.easyui.min.js"></script> <link rel="stylesheet" href="<%=path%>/scripts/map/SearchInfoWindow_min.css" /> <title>測試</title> </head> <body> <div id="allmap"> </div> <div> </body> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map('allmap'); //設定百度地圖中心點以及縮放比例 map.centerAndZoom(new BMap.Point(xxx.xx, xxx.xx), 12); map.enableScrollWheelZoom(true); //設定獲取展示資料的連結 var url = "action/xxaction_methods"; $.post(url, function(data) { if (data != null || data != "") { var list = data.mapItems; var point = new Array(); //存放標註點經緯資訊的陣列 var marker = new Array(); //存放lable物件的陣列 var info = new Array(); //存放提示資訊視窗物件的陣列 var polygon = new Array(); //存放圖形物件陣列 var searchInfoWindow = new Array(); //存放詳情視窗點 for ( var i = 0; i < list.length; i++) { //建立marker物件 point[i] = new BMap.Point(list[i].mapX, list[i].mapY); marker[i] = new BMap.Label("<a href='javascript:void(0);' style='text-decoration : none;color:#000000'>"+(i+1)+"</a>", //為lable填寫內容 {offset:new BMap.Size(-10,-26), //label的偏移量，為了讓label的中心顯示在點上 position:point[i]}); //label的位置 marker[i].setStyle({ //給label設定樣式，任意的CSS都是可以的 fontSize:"16px", //字號 border:"0", //邊 height:"25px", //高度 width:"19px", //寬 textAlign:"center", //文字水平居中顯示 //lineHeight:"20px" //行高，文字垂直居中顯示 background:"url(scripts/map/marker_red_sprite.png)", //背景圖片 }); map.addOverlay(marker[i]); //把label新增到地圖上 //搜尋視窗的建立 searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, list[i].messageText, { title : list[i].lableText, //標題 width : 290, //寬度 height : 105, //高度 panel : "panel", //檢索結果面板 enableAutoPan : true, //自動平移 enableSendToPhone: false,//禁用傳送到手機 offset:new BMap.Size(0,24),//設定偏移位置 searchTypes : [ BMAPLIB_TAB_TO_HERE, //到這裡去 BMAPLIB_TAB_FROM_HERE //從這裡出發 ] }); //為lable新增點選事件 marker[i].addEventListener("click", (function(k) { // js 閉包 return function() { searchInfoWindow[k].open(new BMap.Point(list[k].mapX, list[k].mapY)); }; })(i)); //拼接圖形的座標點 var shape =[]; var listshape = list[i].mapLists[0]; if(undefined!=listshape){ for ( var j = 0; j < listshape.length; j++) { shape.push(new BMap.Point(listshape[j].y,listshape[j].x)); } //新增形狀 polygon[i] = new BMap.Polygon(shape,{ strokeColor : "red", strokeWeight : 2, strokeOpacity : 0.5 }); //建立多邊形 map.addOverlay(polygon[i]); //增加多邊形 } } } else { console.log("位置載入失敗！"); } }); //新增帶有定位的導航控制元件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_LEFT, // LARGE型別 type: BMAP_NAVIGATION_CONTROL_LARGE, // 啟用顯示定位 enableGeolocation: true }); map.addControl(navigationControl); </script> </html>
最終的效果如下：
