百度地圖自定義工具欄
阿新 • • 發佈:2018-12-21
function gongju() { // 自定義控制元件 function ZoomControl() { this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT; this.defaultOffset = new BMap.Size(15, 1); } var size = new BMap.Size(350, 1); map.addControl(new BMap.CityListControl({ anchor : BMAP_ANCHOR_TOP_RIGHT, offset : size, })); // 繼承BMap.Control ZoomControl.prototype = new BMap.Control; // 控制元件初始化 ZoomControl.prototype.initialize = function(map) { var div = document.createElement('div'); var big = document.createElement('img'); var small = document.createElement('img'); var celiang = document.createElement('img'); var lk = document.createElement('img'); var bz = document.createElement('img'); // big.appendChild(document.createTextNode(' ')); div.appendChild(big); div.appendChild(small); div.appendChild(celiang); div.appendChild(lk); div.appendChild(bz); div.style.borderRight = 'solid 1px #c4c7cc'; div.style.borderTop = 'solid 1px #c4c7cc'; div.style.borderBottom = 'solid 1px #c4c7cc'; div.style.height = '24px'; div.style.background = '#fff'; div.style.fontSize = '13px'; div.style.color = '#000'; div.style.textAlign = 'center'; div.style.lineHeight = '24px'; // big.style.borderRight = 'dashed 1px #c4c7cc'; big.style.display = 'inline-block'; big.style.cursor = "pointer"; big.style.width = '60px'; big.style.height = '24px'; big.src = 'images/map/放大.png'; big.style.borderRight = '1px solid #c4c7cc'; big.style.marginRight = '9px'; small.style.cursor = "pointer"; small.style.borderRight = '1px solid #c4c7cc'; small.style.display = 'inline-block'; small.style.width = '60px'; small.style.height = '24px'; small.src = 'images/map/縮小.png'; small.style.marginRight = '5px'; celiang.style.cursor = "pointer"; celiang.style.display = 'inline-block'; celiang.style.borderRight = '1px solid #c4c7cc'; celiang.style.width = '60px'; celiang.style.height = '24px'; celiang.src = 'images/map/測量.png'; celiang.style.marginRight = '5px'; lk.style.cursor = "pointer"; lk.style.display = 'inline-block'; lk.style.borderRight = 'solid 1px #c4c7cc'; lk.style.width = '60px'; lk.style.height = '24px'; lk.src = 'images/map/定位.png'; lk.style.marginRight = '5px'; bz.style.cursor == 'pointer'; bz.style.display = 'inline-block'; bz.style.width = '60px'; bz.style.height = '24px'; bz.style.marginRight = '5px'; bz.src = 'images/map/標記.png'; // 註冊點選事件 big.onclick = function() { map.zoomTo(map.getZoom() + 2); }; small.onclick = function() { map.zoomTo(map.getZoom() - 2); } celiang.onclick = function() { var myDis = new BMapLib.DistanceTool(map); myDis.open(); // 開啟滑鼠測距 } lk.onclick = function() { // 新增帶有定位的導航控制元件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor : BMAP_ANCHOR_TOP_LEFT, // LARGE型別 type : BMAP_NAVIGATION_CONTROL_LARGE, // 啟用顯示定位 enableGeolocation : true }); map.addControl(navigationControl); // 新增定位控制元件 var geolocationControl = new BMap.GeolocationControl(); geolocationControl.addEventListener("locationSuccess", function(e) { // 定位成功事件 var address = ''; address += e.addressComponent.province; address += e.addressComponent.city; address += e.addressComponent.district; address += e.addressComponent.street; address += e.addressComponent.streetNumber; alert("當前定位地址為:" + address); }); geolocationControl.addEventListener("locationError", function(e) { // 定位失敗事件 alert(e.message); }); map.addControl(geolocationControl); } bz.onclick = function() { function showInfo(e) { //alert(e.point.lng + ", " + e.point.lat); var point = new BMap.Point(e.point.lng, e.point.lat); map.centerAndZoom(point, 15); var marker = new BMap.Marker(point); map.addOverlay(marker); //marker.setAnimation(BMAP_ANIMATION_BOUNCE); var label = new BMap.Label("我的標記",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); var removeMarker = function(e, ee, marker) { map.removeOverlay(marker); } var markerMenu = new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('刪除', removeMarker .bind(marker))); marker.addContextMenu(markerMenu); } map.addEventListener("click", showInfo); } // 新增控制元件到地圖 map.getContainer().appendChild(div); return div; }; // 新增自定義控制元件到地圖 var myZoomControl = new ZoomControl(); map.addControl(myZoomControl); }