Google지도 자바 스크립트 맞춤형 표면

Google지도 자바 스크립트 api를 사용하여 맞춤 웹 페이지에지도를 그리려고합니다.Google지도 자바 스크립트 맞춤형 표면

내가 발견 한 모든 것은지도 위에 페인트하는 방법이지만 배경지도가있는 것입니다. 필자는 사용자 정의 기능을 사용하여 localhost에서 맵을 그려 냈습니다.

데이터 소스에서 내 맞춤지도를 만드는 것이 좋습니다.

들어 Booth :

의 내가 다른 폴리 형태의 좌표와 데이터베이스가 있다고 가정 해 봅시다 (0, 0) - (10, 0) - (15, 10) - (10, 15) - (5, 10) - (0, 0) 방 2 : 등 ...

그런 다음 Google지도에서 이러한 양식을 그리기 위해 마우스 이동, 확대/축소 및 확대/축소와 같은 기능을 사용할 수 있습니다. 정보 창을 마우스로 클릭하면 방의 중앙을 클릭하여 Google지도처럼 방 정보 (설명, 표면 등)를 표시합니다.

다른 옵션을 사용하는 것입니다하지만 난 캔버스를 통해 탐색을 구현할 수있는 방법을 부탁 해요 (마우스 움직임, 줌 및 기본적 정보 창)

질문은 다음과 같습니다 - 그것을 할 수 있는가 Google지도 API와 함께? 방법? (데이터 구조 및 자바 스크립트 코드) - 그렇지 않은 경우 어떤 가능성이 이런 컨트롤을 구현해야합니까?

출처

2011-09-19 Miquel

좋아, 여기 내 해결책이된다. 희망은 누군가를 돕는다!
jquery, Google지도 V3에서 작동합니다.

<body> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script src="js/GM_LoadMap.js"></script> 
Your map:<br/> 

<div id="map" style="width: 600px; height: 400px"></div> 
</body>

JS/GM_LoadMap.js : 폴리 양식을 표시하려면

function createBlankCanvas(map, width, height) { 
    var minZoomLevel = 0; 
    var maxZoomLevel = 18; 

    // Crea un fons en blanc 
    var ubicaciones = new google.maps.ImageMapType({ 
      getTileUrl: function(coord, zoom) { 
       return ""; 
      }, 
     tileSize: new google.maps.Size(width, height), 
     maxZoom:maxZoomLevel, 
     minZoom:minZoomLevel, 
     isPng: true, 
     name: 'Ubicaciones', 
     opacity: 0.5 
    }); 

    map.mapTypes.set('TControl', ubicaciones); 
    map.setMapTypeId('TControl'); 
    map.setZoom(5); 
}

var infoWindow; 

$("body").ready(function() {load()}); 
$("body").unload(function() {GUnload();}); 

/************************************************************************************ 
* Métode d'inici 
************************************************************************************/ 

function load() { 
    var domMap = $("#map")[0]; 
    var myLatLng = new google.maps.LatLng(0,0); 
    var myOptions = { 
      zoom: 5, 
      center: myLatLng, 
      mapTypeControlOptions: { 
       mapTypeIds: ['TControl'] 
      } 
    }; 

    var map = new google.maps.Map(domMap, myOptions); 

    createBlankCanvas(map, 600, 400); 
    addPolyForm(map); 
}

는 빈 이미지 배경을 만들려면

이

은 HTML입니다 :

,210

function addPolyForm(map) { 
    var bermudaTriangle; 
    var triangleCoords = [ 
          new google.maps.LatLng(0,0), 
          new google.maps.LatLng(0, 1), 
          new google.maps.LatLng(1, 0.5) 
          ]; 

    bermudaTriangle = new google.maps.Polygon({ 
     paths: triangleCoords, 
     strokeColor: "#FF0000", 
     strokeOpacity: 0.8, 
     strokeWeight: 3, 
     fillColor: "#FF0000", 
     fillOpacity: 0.35 
    }); 

    bermudaTriangle.setMap(map); 

    // Add a listener for the click event 
    google.maps.event.addListener(bermudaTriangle, 'click', showArrays); 
    infowindow = new google.maps.InfoWindow(); 
}

은 정보 창을 표시하려면

function showArrays(event) { 

    // Since this Polygon only has one path, we can call getPath() 
    // to return the MVCArray of LatLngs 
    var vertices = this.getPath(); 

    var contentString = "<b>Triangle de les Bermudes:</b><br />"; 
    contentString += "Posici&ocaute seleccionada: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />"; 

    // Iterate over the vertices. 
    for (var i=0; i < vertices.length; i++) { 
     var xy = vertices.getAt(i); 
     contentString += "<br />" + "Coordenada: " + i + "<br />" + xy.lat() +"," + xy.lng(); 
    } 

    // Replace our Info Window's content and position 
    infowindow.setContent(contentString); 
    infowindow.setPosition(event.latLng); 

    infowindow.open(map); 
}

출처

2011-09-22 08:22:05 Miquel

당신이 몇 가지 필요한 방법 클래스 있도록 OverlayView를 사용하고 덮어 쓰기를 할 수있는 (내가 여기에 HTML을 생성하기 위해 jQuery를 사용하고 통지를,하지만 당신은 당신이 원하는 무엇이든 그것을 할 수 있습니다에) :

YourCustomFormMarker.prototype = new google.maps.OverlayView; 

YourCustomFormMarker.prototype.onAdd = function(){ 
    var $markerDiv = $("your html here");   


    this.div_ = $markerDiv[0]; 

    var panes = this.getPanes(); 
    panes.overlayMouseTarget.appendChild($markerDiv[0]); 

} 

YourCustomFormMarker.prototype.draw = function(){ 
    var overlayProjection = this.getProjection(); 

    var position = overlayProjection.fromLatLngToDivPixel(this.options.position); 
    var div = this.div_; 
    div.style.left = (position.x - this.options.x_offset) + 'px'; 
    div.style.top = (position.y - this.options.y_offset) + 'px'; 


} 

YourCustomFormMarker.prototype.onRemove = function() { 
    $(this.div_).remove(); 
    this.div_ = null; 
} 


function YourCustomFormMarker(options){ 

    var defaultOptions = { 
     position : null, 
     label: 'empty', 
     time: '', 
     x_offset: 15, 
     y_offset: 0 
    }; 

    //Merge options with default options 
    this.options = $.extend(true, {}, 
     defaultOptions, 
     options 
    ); 

}

으로 이 코드에서는지도에서 마커와 똑같이 동작하는 모든 것을 그릴 수 있어야합니다 (확대/축소,지도 이동 등).

출처

2011-09-19 11:40:09 cicloon

를 좋아요 그! 고마워, 이제는 http://code.google.com/intl/ca/apis/maps/documentation/javascript/overlays.html을 공부하고 있습니다. 이제 어떻게 배경을 지울 수 있습니까? 한 가지는 흰색 오버레이를 만드는 것입니다 ...하지만 이것은지도를로드하고 오버레이를로드하는 것을 의미합니다 ... 간단한 방법? 도움말에 다시 한 번 감사드립니다. – Miquel

Google지도 자바 스크립트 맞춤형 표면

답변

관련 문제