2015-12-04 17 views
5

czytałem kilka postów dotyczących tej kwestii z linkami do examplesOtwarte warstwy 3 uzyskaj podstawowy program Google Maps?

Jednak trudno mi podążać jak zrobili to na przykładzie:

var gmap = new google.maps.Map(document.getElementById('gmap'), { 
    disableDefaultUI: true, 
    keyboardShortcuts: false, 
    draggable: false, 
    disableDoubleClickZoom: true, 
    scrollwheel: false, 
    streetViewControl: false 
}); 

var view = new ol.View({ 
    // make sure the view doesn't go beyond the 22 zoom levels of Google Maps 
    maxZoom: 21 
}); 
view.on('change:center', function() { 
    var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326'); 
    gmap.setCenter(new google.maps.LatLng(center[1], center[0])); 
}); 
view.on('change:resolution', function() { 
    gmap.setZoom(view.getZoom()); 
}); 

var vector = new ol.layer.Vector({ 
    source: new ol.source.GeoJSON({ 
    url: 'data/geojson/countries.geojson', 
    projection: 'EPSG:3857' 
    }), 
    style: new ol.style.Style({ 
    fill: new ol.style.Fill({ 
     color: 'rgba(255, 255, 255, 0.6)' 
    }), 
    stroke: new ol.style.Stroke({ 
     color: '#319FD3', 
     width: 1 
    }) 
    }) 
}); 

var olMapDiv = document.getElementById('olmap'); 
var map = new ol.Map({ 
    layers: [vector], 
    interactions: ol.interaction.defaults({ 
    altShiftDragRotate: false, 
    dragPan: false, 
    rotate: false 
    }).extend([new ol.interaction.DragPan({kinetic: null})]), 
    target: olMapDiv, 
    view: view 
}); 
view.setCenter([0, 0]); 
view.setZoom(1); 

olMapDiv.parentNode.removeChild(olMapDiv); 
gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv); 

Ile DOM elementy mam tworzyć? Czy to jest poprawne?

<div id="map"> 
    <div id="gmap"></div> 
    <div id="olmap"></div> 
</div> 

Otrzymuję błąd przez takie struktury. Oto błąd, który dostaję:

Cannot read property 'parentNode' of null 

Jakieś wskazówki dotyczące wdrażania Map Google w OL3?

Odpowiedz