【发布时间】：2018-04-18 17:03:28
【问题描述】：
我正在尝试将谷歌地图的实现转移到 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 识别检票口，这样我就不必使用 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>
)
}
}
【问题讨论】：
标签： javascript reactjs google-maps