百度地圖給指定的點加標籤
阿新 • • 發佈：2018-11-26
本文介紹利用百度地圖api先顯示地圖，然後在地圖上標記一個或者多個點，然後將每個點的自定義標籤用tip的方式展現出來。
效果截圖：
程式碼：
<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script> <title>根據城市名設定地圖中心點</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> //新建地圖點的集合 var points = [ {"lng":114.046304,"lat":22.628841,"url":"http://www.baidu.com","id":1,"name":"p1"}, ]; //建立標註點並新增到地圖中 function addMarker(points) { //迴圈建立標註點 for(var i=0, pointsLen = points.length; i<pointsLen; i++) { var point = new BMap.Point(points[i].lng, points[i].lat); //將標註點轉化成地圖上的點 var marker = new BMap.Marker(point); //將點轉化成標註點 map.addOverlay(marker); //將標註點新增到地圖上 // //新增監聽事件，點選後顯示tip // (function() { // var thePoint = points[i]; // marker.addEventListener("click", // function(){ // showInfo(this,thePoint); // }); // })(); //直接顯示tip，不新增事件 showInfo(marker,points[i]); } } function showInfo(thisMarker,point) { //獲取點的資訊 var sContent = '<ul style="margin:0 0 5px 0;padding:0.2em 0">' +'<li style="line-height: 26px;font-size: 15px;">' +'<span style="width: 80px;display: inline-block;">我的地址：</span><a href="'+point.url+'">嘉熙業廣場 <a></li>' +'</ul>'; var infoWindow = new BMap.InfoWindow(sContent); //建立資訊視窗物件 thisMarker.openInfoWindow(infoWindow); //圖片載入完後重繪infoWindow } //建立地圖 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(114.046304,22.628841), 19); // 設定中心點 map.setCurrentCity("深圳"); //設定為深圳 map.addControl(new BMap.MapTypeControl()); map.enableScrollWheelZoom(true); addMarker(points); </script> </script>