Nút Thu phóng V3 Bản đồ Google API tùy chỉnh

-5

Điều này là không thể. Bạn có thể tinh chỉnh sự xuất hiện của họ một chút bằng cách sử dụng một tập hợp các thông số tùy chọn được xác định trước hoặc bạn có thể thực hiện điều khiển bản đồ tùy chỉnh của bạn cung cấp chức năng tương tự như điều khiển thu phóng. Để biết thêm thông tin, hãy xem this page.

CẬP NHẬT: Đã sửa liên kết. Cảm ơn vì bạn đã phản hồi!

Nguồn

2011-10-27 13:41:14

+0

liên kết không hoạt động? – HAWKES08

+0

Vui lòng sửa liên kết của bạn hoặc đăng các hướng dẫn có liên quan vào câu trả lời của bạn. – Sparky

+0

[Cố định liên kết tại đây] (http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/controls.html). Anh ta vừa bỏ lỡ chữ "L" ở cuối "htm". – RASG

13

Sau giờ tìm kiếm, tôi đã tìm thấy giải pháp Chỉ cần đảm bảo bạn thay thế ID API của mình! Tận hưởng!

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; } 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false&region=AU"> 
    </script> 



<script type="text/javascript"> 

function HomeControl(controlDiv, map) { 

google.maps.event.addDomListener(zoomout, 'click', function() { 
    var currentZoomLevel = map.getZoom(); 
    if(currentZoomLevel != 0){ 
    map.setZoom(currentZoomLevel - 1);}  
    }); 

    google.maps.event.addDomListener(zoomin, 'click', function() { 
    var currentZoomLevel = map.getZoom(); 
    if(currentZoomLevel != 21){ 
    map.setZoom(currentZoomLevel + 1);} 
    }); 

} 

var map; 
var markersArray = []; 


function initialize() { 

    var mapDiv = document.getElementById('map-canvas'); 
    var myLatlng = new google.maps.LatLng(-33.90224, 151.20215); 
    var mapOptions = { 
    zoom: 15, 
    center: myLatlng, 
    Marker: true, 
    panControl: false, 
    zoomControl: false, 
    streetViewControl: false, 
    overviewMapControl: false, 
    mapTypeControl: false, 
    mapTypeControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(mapDiv, mapOptions); 
    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:"Hello World!" 
    }); 

    // Create the DIV to hold the control and 
    // call the HomeControl() constructor passing 
    // in this DIV. 
    var homeControlDiv = document.createElement('div'); 
    var homeControl = new HomeControl(homeControlDiv, map); 

} 

google.maps.event.addDomListener(window, 'load', initialize);  

</script> 

</head> 




    <body> 
    <div id="map-canvas"></div> 
    <div id="zoomout" style="border:1px solid; width:150px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div> 
    <div id="zoomin" style="border:1px solid; width:150px; cursor:pointer; ">ZOOM ME IN</div> 
    </body> 
</html>

Nguồn

2013-06-03 04:33:40

+0

có thể thêm nút Người hình mắc áo tùy chỉnh không? – Anuket

+0

@Antonio Almeida Cảm ơn –

3

tôi đã làm nó theo cách CSS:

#map-container .gm-style > .gmnoprint > .gmnoprint { background: url(/images/map-zoom-controls.png) no-repeat center center !important; width: 42px !important; height: 68px !important; } 
#map-container .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; } 
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px !important; left: 2px !important; width: 38px !important; height: 31px !important; } 
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }

Đây là một hình ảnh có: width: 42px; chiều cao: 68px;

Thực hiện các điều chỉnh của riêng bạn.

ATTENTION

này chỉ áp dụng nếu bạn đang sử dụng phiên bản tiếng Anh vì các thuộc tính tiêu đề.

Nguồn

2014-02-11 18:54:17 PAdrian

+0

Rất tốt! Hoạt động hoàn toàn tốt cho tôi! – SquareCat

+2

Điều này sẽ hoạt động miễn là cấu trúc được cung cấp bởi giao diện người dùng Google Maps vẫn giữ nguyên, bạn không bao giờ nên dựa vào các quy tắc được mã hóa cứng để đạt được mục tiêu của mình. – torresomar

18

Tôi đến muộn tại bữa tiệc, nhưng đây là hai xu của tôi.

Bạn có về cơ bản hai lựa chọn:

Lựa chọn 1: Bạn có thể tạo ra các điều khiển sử dụng HTML/CSS cho mình, sau đó bạn có thể đặt trên bản đồ để đúng vị trí sử dụng vị trí phương tiện tuyệt đối hoặc tương đương. Mặc dù điều này làm việc trong sản xuất, tôi không thích điều này, bởi vì HTML/CSS của bạn cho phần tử không tải cùng một lúc so với bản đồ được hiển thị. Ngoài ra, bạn đang tách mã HTML/CSS của bạn cho các điều khiển để khó sử dụng lại cùng một bản đồ ở các trang khác nhau. ví dụ. "Tôi đã quên thêm các điều khiển chưa?"

Phương án 2: Bạn tạo a custom control trông và cảm thấy các bộ điều khiển zoom mà bạn thích. Dưới đây là một mã về điều này trong thực tế.

Nói tóm lại, bạn cần phải đầu tiên vô hiệu hóa điều khiển giao diện người dùng bình thường bằng cách gọi:

var mapOptions = { 
    zoom: 12, 
    center: chicago, 
    /* Disabling default UI widgets */ 
    disableDefaultUI: true // <-- see this line 
}

Và sau đó bạn chỉ cần tạo bộ điều khiển và sử dụng nó.

HTML:

... 
<div id="map-canvas"></div> 
...

CSS:

html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
}

JavaScript:

var map; 
var chicago = new google.maps.LatLng(41.850033, -87.6500523); 

/** 
* The ZoomControl adds +/- button for the map 
* 
*/ 
function ZoomControl(controlDiv, map) { 

    // Creating divs & styles for custom zoom control 
    controlDiv.style.padding = '5px'; 

    // Set CSS for the control wrapper 
    var controlWrapper = document.createElement('div'); 
    controlWrapper.style.backgroundColor = 'white'; 
    controlWrapper.style.borderStyle = 'solid'; 
    controlWrapper.style.borderColor = 'gray'; 
    controlWrapper.style.borderWidth = '1px'; 
    controlWrapper.style.cursor = 'pointer'; 
    controlWrapper.style.textAlign = 'center'; 
    controlWrapper.style.width = '32px'; 
    controlWrapper.style.height = '64px'; 
    controlDiv.appendChild(controlWrapper); 

    // Set CSS for the zoomIn 
    var zoomInButton = document.createElement('div'); 
    zoomInButton.style.width = '32px'; 
    zoomInButton.style.height = '32px'; 
    /* Change this to be the .png image you want to use */ 
    zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")'; 
    controlWrapper.appendChild(zoomInButton); 

    // Set CSS for the zoomOut 
    var zoomOutButton = document.createElement('div'); 
    zoomOutButton.style.width = '32px'; 
    zoomOutButton.style.height = '32px'; 
    /* Change this to be the .png image you want to use */ 
    zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")'; 
    controlWrapper.appendChild(zoomOutButton); 

    // Setup the click event listener - zoomIn 
    google.maps.event.addDomListener(zoomInButton, 'click', function() { 
    map.setZoom(map.getZoom() + 1); 
    }); 

    // Setup the click event listener - zoomOut 
    google.maps.event.addDomListener(zoomOutButton, 'click', function() { 
    map.setZoom(map.getZoom() - 1); 
    }); 

} 

function initialize() { 
    var mapDiv = document.getElementById('map-canvas'); 

    var mapOptions = { 
    zoom: 12, 
    center: chicago, 
    /* Disabling default UI widgets */ 
    disableDefaultUI: true 
    } 

    map = new google.maps.Map(mapDiv, mapOptions); 

    // Create the DIV to hold the control and call the ZoomControl() constructor 
    // passing in this DIV. 
    var zoomControlDiv = document.createElement('div'); 
    var zoomControl = new ZoomControl(zoomControlDiv, map); 

    zoomControlDiv.index = 1; 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv); 
} 

initialize();

Lưu ý: Mã này không chứa bất kỳ fanc y và các biểu tượng tương tự, chỉ là trình giữ chỗ. Vì vậy, bạn có thể cần phải điều chỉnh nó để phù hợp với nhu cầu của bạn. Hơn nữa, hãy nhớ thêm thẻ HTML5 bình thường và tập lệnh bao gồm cho bản đồ google api v3 javascript. Tôi chỉ thêm <div id="map-canvas"></div> vì nhu cầu nghỉ ngơi của cơ thể khá rõ ràng.

Để xem nó sống: Here is working jsfiddle example

Cheers.

Nguồn

2014-08-08 09:44:30

+2

Thật tuyệt vời. –

+1

Cảm ơn bạn rất nhiều vì điều này. –

+0

Công trình này tuyệt vời, cảm ơn bạn! Một cải tiến nhỏ có thể là cung cấp cho các tên lớp điều khiển thu phóng như 'controlWrapper.setAttribute (" class "," custom-zoom-wrapper ");' etc. Điều này có nghĩa là các kiểu có thể được thêm vào css thay vì js, dẫn đến mã sạch hơn và cho phép truy vấn phương tiện tức là các nút nhỏ hơn trên màn hình nhỏ hơn. – Davey

Nút Thu phóng V3 Bản đồ Google API tùy chỉnh

Trả lời

Các vấn đề liên quan