0
Googleマップの実装をReactに移行しようとしています。 jsfiddleで動作しますが、CDNとjqueryを使用する必要があるため、これをReactで動作させるのに問題があります。ヌルのgoogleマップの 'firstChild'プロパティを読み取ることができません
Googleマップの例 - ここでhttps://jsfiddle.net/quqz096d/16
が反応への私の実装です - 私は「改札」として外部リソースをロードするためにCDNのを使用することだということである私がいるhttps://codesandbox.io/s/n3ly2zyj5p
2の問題」doesnのnpm経由でインストールすると認識され、マップを初期化するときにエラーCannot read property 'firstChild' of nullが表示されます。
私はCDNを使用する必要はありませんので、どのようにマップを表示してエラーを回避することができますようにnpmに改札を認識させることができますか？
Hello.js
/* eslint-disable */
import React from 'react'
import './styles.css'
import './map.js'
export default class Hello extends React.Component {
render(){
$(document).ready(function() {
function UseWicketToGoFromGooglePolysToWKT(poly1, poly2) {
var wicket = new Wkt.Wkt();
wicket.fromObject(poly1);
var wkt1 = wicket.write();
wicket.fromObject(poly2);
var wkt2 = wicket.write();
return [wkt1, wkt2];
}
function UseJstsToTestForIntersection(wkt1, wkt2) {
// Instantiate JSTS WKTReader and get two JSTS geometry objects
var wktReader = new jsts.io.WKTReader();
var geom1 = wktReader.read(wkt1);
var geom2 = wktReader.read(wkt2);
}
function UseJstsToDissolveGeometries(wkt1, wkt2) {
// Instantiate JSTS WKTReader and get two JSTS geometry objects
var wktReader = new jsts.io.WKTReader();
var geom1 = wktReader.read(wkt1);
var geom2 = wktReader.read(wkt2);
// In JSTS, "union" is synonymous with "dissolve"
var dissolvedGeometry = geom1.union(geom2);
// Instantiate JSTS WKTWriter and get new geometry's WKT
var wktWriter = new jsts.io.WKTWriter();
var wkt = wktWriter.write(dissolvedGeometry);
// Use Wicket to ingest the new geometry's WKT
var wicket = new Wkt.Wkt();
wicket.read(wkt);
// Assemble your new polygon's options, I used object notation
var polyOptions = {
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.35
};
// Let wicket return a Google Polygon with the options you set above
var newPoly = wicket.toObject(polyOptions);
polygon1.setMap(null);
polygon2.setMap(null);
polygon4.setMap(null);
polygon5.setMap(null);
newPoly.setMap(map);
}
var mapOptions = {
center: new google.maps.LatLng(50.08804, 14.42076),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var coords = [
new google.maps.LatLng(49.262985388398, 16.651552652553),
new google.maps.LatLng(49.268154293695, 16.696169517975),
new google.maps.LatLng(49.279279281222, 16.684044046655),
new google.maps.LatLng(49.29051372157, 16.69354790883),
new google.maps.LatLng(49.291693807108, 16.696711972181),
new google.maps.LatLng(49.291754288729, 16.700906003794),
new google.maps.LatLng(49.287224249824, 16.708018278815),
new google.maps.LatLng(49.269030413678, 16.716675506228),
new google.maps.LatLng(49.264399780154, 16.741519717396),
new google.maps.LatLng(49.257603048662, 16.755486775372),
new google.maps.LatLng(49.250805381075, 16.764647314794),
new google.maps.LatLng(49.224771273353, 16.709762631879),
new google.maps.LatLng(49.211636932658, 16.723347359512),
new google.maps.LatLng(49.190309978235, 16.733155536853),
new google.maps.LatLng(49.180168244216, 16.73897258718),
new google.maps.LatLng(49.169575489284, 16.744102991998),
new google.maps.LatLng(49.162404281723, 16.749490888883),
new google.maps.LatLng(49.153547978232, 16.756852891603),
new google.maps.LatLng(49.133280070767, 16.786993699245),
new google.maps.LatLng(49.107610095774, 16.797050125784),
new google.maps.LatLng(49.09345145266, 16.767467010234),
new google.maps.LatLng(49.080895297287, 16.738570187728),
new google.maps.LatLng(49.080491255717, 16.713371482742),
new google.maps.LatLng(49.072497012164, 16.703751047716),
new google.maps.LatLng(49.056097057925, 16.680771248057),
new google.maps.LatLng(49.046595816216, 16.642153144456),
new google.maps.LatLng(49.020460102381, 16.634173743535),
new google.maps.LatLng(49.028989499528, 16.606281622887),
new google.maps.LatLng(49.017651016771, 16.588388777446),
new google.maps.LatLng(49.035732241135, 16.572490068959),
new google.maps.LatLng(49.06977908486, 16.580280630492),
new google.maps.LatLng(49.091541070978, 16.569729162022),
new google.maps.LatLng(49.093756140248, 16.546612884063),
new google.maps.LatLng(49.094414014421, 16.509563030607),
new google.maps.LatLng(49.123726846521, 16.495515801661),
new google.maps.LatLng(49.141450293969, 16.487353801526),
new google.maps.LatLng(49.182287496702, 16.490864775023),
new google.maps.LatLng(49.231794094402, 16.507802307393),
new google.maps.LatLng(49.251996444572, 16.486292840573),
new google.maps.LatLng(49.262766673059, 16.496309133774),
new google.maps.LatLng(49.262781359229, 16.501518908421),
new google.maps.LatLng(49.256566333557, 16.531971044116),
new google.maps.LatLng(49.295657825466, 16.487131907305),
new google.maps.LatLng(49.326781008179, 16.532722798718),
new google.maps.LatLng(49.297128289052, 16.619936823457),
new google.maps.LatLng(49.288287925981, 16.646039397999),
new google.maps.LatLng(49.262985388398, 16.651552652553),
];
var coords2 = [
new google.maps.LatLng(49.2586746285, 16.548371315002),
new google.maps.LatLng(49.277604734014, 16.582703590393),
new google.maps.LatLng(49.296079782666, 16.619782447815),
new google.maps.LatLng(49.287123047871, 16.643128395081),
new google.maps.LatLng(49.261587425184, 16.650338172913),
new google.maps.LatLng(49.266964444325, 16.700119972229),
new google.maps.LatLng(49.254193067134, 16.712307929993),
new google.maps.LatLng(49.241642530476, 16.737198829651),
new google.maps.LatLng(49.229313005054, 16.715569496155),
new google.maps.LatLng(49.225052999213, 16.707673072815),
new google.maps.LatLng(49.212046498864, 16.72209262848),
new google.maps.LatLng(49.204083934969, 16.758828163147),
new google.maps.LatLng(49.173455370467, 16.769127845764),
new google.maps.LatLng(49.174016503645, 16.788182258606),
new google.maps.LatLng(49.165486592872, 16.801915168762),
new google.maps.LatLng(49.133261701694, 16.784234046935),
new google.maps.LatLng(49.109332116515, 16.794962882995),
new google.maps.LatLng(49.108320753033, 16.742520332337),
new google.maps.LatLng(49.095957977994, 16.722350120545),
new google.maps.LatLng(49.092136133539, 16.67814731598),
new google.maps.LatLng(49.083142397663, 16.620812416077),
new google.maps.LatLng(49.079375786844, 16.610770225524),
new google.maps.LatLng(49.082805100877, 16.58630847931),
new google.maps.LatLng(49.119556967033, 16.554894447327),
new google.maps.LatLng(49.131689219618, 16.529488563538),
new google.maps.LatLng(49.149208344183, 16.470437049866),
new google.maps.LatLng(49.159312714511, 16.387009620667),
new google.maps.LatLng(49.168068168316, 16.34855747223),
new google.maps.LatLng(49.193399748804, 16.343171596528),
new google.maps.LatLng(49.212214708212, 16.3707447052),
new google.maps.LatLng(49.23671108962, 16.38288974762),
new google.maps.LatLng(49.245676979472, 16.402201652527),
new google.maps.LatLng(49.252176231763, 16.42288684845),
new google.maps.LatLng(49.250831629069, 16.487946510315),
new google.maps.LatLng(49.262035532491, 16.49721622467),
new google.maps.LatLng(49.253520797832, 16.531205177308),
new google.maps.LatLng(49.2586746285, 16.548371315002),
];
var coords3 = [
new google.maps.LatLng(50.053694570768, 15.73890209198),
new google.maps.LatLng(50.060300338732, 15.741423368454),
new google.maps.LatLng(50.06277640633, 15.740881562233),
new google.maps.LatLng(50.068063880789, 15.738636553288),
new google.maps.LatLng(50.090232729029, 15.760430842639),
new google.maps.LatLng(50.085633529415, 15.783684253693),
new google.maps.LatLng(50.078631917353, 15.809079408646),
new google.maps.LatLng(50.071866851888, 15.809352993966),
new google.maps.LatLng(50.055678463163, 15.810270309448),
new google.maps.LatLng(50.058282197455, 15.819840431214),
new google.maps.LatLng(50.051204256403, 15.828820466996),
new google.maps.LatLng(50.043904789772, 15.830676555634),
new google.maps.LatLng(50.030460394663, 15.833745002747),
new google.maps.LatLng(50.026742020752, 15.845045149327),
new google.maps.LatLng(50.020967459894, 15.84202632308),
new google.maps.LatLng(50.019493982719, 15.834200978279),
new google.maps.LatLng(50.011503675166, 15.820237398148),
new google.maps.LatLng(49.99085647193, 15.817844867707),
new google.maps.LatLng(49.983544381282, 15.79580783844),
new google.maps.LatLng(49.99560183777, 15.783920288086),
new google.maps.LatLng(49.995146634027, 15.749373435974),
new google.maps.LatLng(50.005891051388, 15.748558044434),
new google.maps.LatLng(50.017363823547, 15.711307525634),
new google.maps.LatLng(50.028682227671, 15.705685615539),
new google.maps.LatLng(50.03916419239, 15.686995983123),
new google.maps.LatLng(50.050525683613, 15.728216171264),
]
var coords4 = [
new google.maps.LatLng(50.086776271667, 14.411187171937),
new google.maps.LatLng(50.093446313761, 14.405543804168),
new google.maps.LatLng(50.093611504263, 14.407582283019),
new google.maps.LatLng(50.098112726191, 14.465957880019),
new google.maps.LatLng(50.095710750594, 14.458061456681),
new google.maps.LatLng(50.091932040978, 14.438931941987),
new google.maps.LatLng(50.086266859813, 14.438084363938),
new google.maps.LatLng(50.081557985814, 14.433567523955),
new google.maps.LatLng(50.079774826525, 14.430488348007),
new google.maps.LatLng(50.077647341221, 14.419426918031),
new google.maps.LatLng(50.073557347011, 14.415392875672),
new google.maps.LatLng(50.067208213772, 14.416809082031),
new google.maps.LatLng(50.066223403061, 14.420553445817),
new google.maps.LatLng(50.062759187941, 14.421186447145),
new google.maps.LatLng(50.061677860817, 14.416154623032),
new google.maps.LatLng(50.047701064336, 14.410994052886),
new google.maps.LatLng(50.051441926838, 14.406348466873),
new google.maps.LatLng(50.062869385515, 14.40908432007),
new google.maps.LatLng(50.081378984402, 14.406681060789),
new google.maps.LatLng(50.081764525075, 14.408440589906),
new google.maps.LatLng(50.081819602062, 14.408912658691),
new google.maps.LatLng(50.081874678984, 14.410028457641),
new google.maps.LatLng(50.08237036844, 14.41123008728),
new google.maps.LatLng(50.086776271667, 14.411187171937),
]
var coords5 = [
new google.maps.LatLng(50.06306406683, 14.4095993042),
new google.maps.LatLng(50.063284460323, 14.412860870362),
new google.maps.LatLng(50.06802267553, 14.409084320069),
new google.maps.LatLng(50.070887415799, 14.409599304198),
new google.maps.LatLng(50.075845215724, 14.41062927246),
new google.maps.LatLng(50.0836664799, 14.410114288329),
new google.maps.LatLng(50.091183605008, 14.413719177246),
new google.maps.LatLng(50.097708504849, 14.418439865111),
new google.maps.LatLng(50.10293879554, 14.418439865111),
new google.maps.LatLng(50.10668223191, 14.417581558228),
new google.maps.LatLng(50.111030856788, 14.420757293702),
new google.maps.LatLng(50.110865726348, 14.417066574096),
new google.maps.LatLng(50.111195986659, 14.408655166626),
new google.maps.LatLng(50.11174641545, 14.401874542236),
new google.maps.LatLng(50.112792212729, 14.397239685059),
new google.maps.LatLng(50.11438838559, 14.393978118897),
new google.maps.LatLng(50.121212800443, 14.393463134765),
new google.maps.LatLng(50.116259692911, 14.378528594971),
new google.maps.LatLng(50.112461963426, 14.368658065796),
new google.maps.LatLng(50.112847254059, 14.353637695313),
new google.maps.LatLng(50.115158932757, 14.331150054932),
new google.maps.LatLng(50.116259692911, 14.318962097169),
new google.maps.LatLng(50.111085900142, 14.304885864259),
new google.maps.LatLng(50.104590347649, 14.290294647218),
new google.maps.LatLng(50.09319347897, 14.295186996461),
new google.maps.LatLng(50.081243126025, 14.292011260987),
new google.maps.LatLng(50.064000732187, 14.276990890504),
new google.maps.LatLng(50.048515857306, 14.273643493653),
new google.maps.LatLng(50.042452801429, 14.271926879883),
new google.maps.LatLng(50.045374187593, 14.308319091797),
new google.maps.LatLng(50.040688859551, 14.318962097168),
new google.maps.LatLng(50.040302988625, 14.33183670044),
new google.maps.LatLng(50.045732458563, 14.341707229615),
new google.maps.LatLng(50.046862372565, 14.34986114502),
new google.maps.LatLng(50.042066944681, 14.35715675354),
new google.maps.LatLng(50.058876398045, 14.390029907227),
new google.maps.LatLng(50.063064066831, 14.40788269043),
new google.maps.LatLng(50.06306406683, 14.4095993042),
]
//brno
var polygon1 = new google.maps.Polygon({
paths: [coords],
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#00FF00',
fillOpacity: 0.35
});
//brno
var polygon2 = new google.maps.Polygon({
paths: [coords2],
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#0000FF',
fillOpacity: 0.35
});
// pardubice
var polygon3 = new google.maps.Polygon({
paths: [coords3],
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#0000FF',
fillOpacity: 0.35
});
var polygon4 = new google.maps.Polygon({
paths: [coords4],
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#0000FF',
fillOpacity: 0.35
});
var polygon5 = new google.maps.Polygon({
paths: [coords5],
strokeColor: '#ff00ff',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#ff00ff',
fillOpacity: 0.35
});
polygon1.setMap(map);
polygon2.setMap(map);
polygon3.setMap(map);
polygon4.setMap(map);
polygon5.setMap(map);
function DoEverything() {
var wkt = UseWicketToGoFromGooglePolysToWKT(polygon4, polygon5);
UseJstsToTestForIntersection(wkt[0], wkt[1]);
UseJstsToDissolveGeometries(wkt[0], wkt[1]);
}
function DoEverything2() {
var wkt = UseWicketToGoFromGooglePolysToWKT(polygon1, polygon2);
UseJstsToTestForIntersection(wkt[0], wkt[1]);
UseJstsToDissolveGeometries(wkt[0], wkt[1]);
}
DoEverything()
DoEverything2()
})
return(
<div id="map_canvas"></div>
)
}
}
を解決しているように見えますか？ – Pang