Javascript 传单：未找到地图容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42647735/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leaflet: Map container not found
提问by cbll
I have the below react class which fetches the geolocation through the browser.
我有以下反应类，它通过浏览器获取地理位置。
I am mapping a leaflet map. I want to geolocation to be an input to the setView, for such that the map "zooms" into the region of the client browser location.
我正在绘制传单地图。我想将地理定位作为 setView 的输入，以便地图“放大”到客户端浏览器位置的区域。
Here's the react class:
这是反应类：
import React from 'react';
import L from 'leaflet';
import countries from './countries.js';
var Worldmap = React.createClass({
render: function() {
let geolocation = [];
navigator.geolocation.getCurrentPosition(function(position) {
let lat = position.coords.latitude;
let lon = position.coords.longitude;
geolocation.push(lat, lon);
locationCode()
});
function locationCode() {
if(geolocation.length <= 0)
geolocation.push(0, 0);
}
let map = L.map('leafletmap').setView(geolocation, 3);
L.geoJSON(countries, {
style: function(feature) {
return {
fillColor: "#FFBB78",
fillOpacity: 0.6,
stroke: true,
color: "black",
weight: 2
};
}
}).bindPopup(function(layer) {
return layer.feature.properties.name;
}).addTo(map);
return (
<div id="leafletmap" style={{width: "100%", height: "800px" }}/>
)
}
});
export default Worldmap
It's called in a main file where the HTML is rendered as <WorldMap />.
它在主文件中调用，其中 HTML 呈现为<WorldMap />.
I get the error Uncaught Error: Map container not found.when loading the page. Looking around, usually it would be because the map is trying to be displayed in a div before being provided values((gelocation, 3) in this case). However, it shouldn't display it before being returned from the render function below.
Uncaught Error: Map container not found.加载页面时出现错误。环顾四周，通常是因为地图试图在提供值之前显示在 div 中（在这种情况下为（gelocation, 3））。但是，它不应该在从下面的渲染函数返回之前显示它。
What could the issue be?
可能是什么问题？
Printing out the geolocationin the console correctly fetches the coordinates, so that doesn't seem to be the issue.
geolocation在控制台中打印出正确获取坐标，所以这似乎不是问题。
回答by IvanSanchez
The <div id="leafletmap">must be added to the dom beforecalling L.map('leafletmap').
在<div id="leafletmap">必须添加到DOM之前调用L.map('leafletmap')。
回答by Samuel_NET
In addition to @IvanSanchez's response, You could add the geolocation and L.map(...) code to componentDidMount() React lifecycle method (depending on what other goals you hope to achieve). You could also create and bind event handlers for location found as well.
除了@IvanSanchez 的响应，您还可以将 geolocation 和 L.map(...) 代码添加到 componentDidMount() React 生命周期方法（取决于您希望实现的其他目标）。您还可以为找到的位置创建和绑定事件处理程序。
This way must have been added the dom and leaflet can find it.
这种方式肯定是加了dom和leaflet可以找到的。
Happy to help with this if it's still unclear.
如果还不清楚，很乐意帮助解决这个问题。
回答by elonaire
I hope this helps if you are using Angular:
如果您使用 Angular，我希望这会有所帮助：
const container = document.getElementById('map')
if(container) {
// code to render map here...
}
