我正在尝试将Google地图的实现移动到React中。它适用于jsfiddle，但由于必须使用CDN和jquery，我无法在React中使用它。
Google地图示例 - https://jsfiddle.net/quqz096d/16
以下是我对React的实现 - https://codesandbox.io/s/n3ly2zyj5p
我遇到的2个问题是我不得不使用CDN来加载外部资源，因为在通过npm安装时“wicket”无法识别，我在初始化地图时收到错误Cannot read property 'firstChild' of null。
如何让npm识别wicket，这样我就不必使用CDN了，如何显示地图并解决错误？
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>
)
}
}
答案 0 :(得分：0)
我已经更新了jquery的版本，这看起来已经解决了这个