- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
尝试使用 DrawingManager 显示在“react-google-maps”中绘制的预定义坐标
尝试使用“polygonOptions”中的“paths”来实现它,但没有
'
路径属性被忽略,新多边形的 map 属性总是设置为 DrawingManager 的 map
'
https://developers.google.com/maps/documentation/javascript/reference/drawing#DrawingManagerOptions.polygonOptions
我找到了一个使用 vanilla js 的解决方案
http://jsfiddle.net/FUUxz/
我需要一个使用“react-google-maps”的解决方案
/* eslint-disable no-undef */
import React from "react";
import { compose, withProps } from "recompose";
import { withScriptjs, withGoogleMap, GoogleMap } from "react-google-maps";
import { GOOGLE_MAP_KEY } from "../../../config/general";
const coords = [
[
{ lat: 51.509674, lng: -0.193036 },
{ lat: 51.50947, lng: -0.194151 },
{ lat: 51.509116, lng: -0.194034 },
{ lat: 51.509043, lng: -0.19451 },
{ lat: 51.508987, lng: -0.194893 },
{ lat: 51.508931, lng: -0.195204 },
{ lat: 51.508837, lng: -0.195909 },
{ lat: 51.508898, lng: -0.195922 },
{ lat: 51.508636, lng: -0.19703 },
{ lat: 51.508572, lng: -0.197381 },
{ lat: 51.508483, lng: -0.197726 },
{ lat: 51.508389, lng: -0.198136 },
{ lat: 51.508559, lng: -0.198215 },
{ lat: 51.508449, lng: -0.198656 },
{ lat: 51.508334, lng: -0.19927 },
{ lat: 51.508355, lng: -0.19937 },
{ lat: 51.508404, lng: -0.199497 },
{ lat: 51.508372, lng: -0.200011 },
{ lat: 51.508308, lng: -0.200201 },
{ lat: 51.50819, lng: -0.20015 },
{ lat: 51.508158, lng: -0.200309 },
{ lat: 51.507973, lng: -0.200178 },
{ lat: 51.508009, lng: -0.199983 },
{ lat: 51.507734, lng: -0.199859 },
{ lat: 51.507595, lng: -0.200528 },
{ lat: 51.507496, lng: -0.20047 },
{ lat: 51.5074, lng: -0.200796 },
{ lat: 51.507916, lng: -0.201185 },
{ lat: 51.507734, lng: -0.20186 },
{ lat: 51.507004, lng: -0.201298 },
{ lat: 51.50681, lng: -0.202022 },
{ lat: 51.507523, lng: -0.202634 },
{ lat: 51.507358, lng: -0.203272 },
{ lat: 51.507264, lng: -0.203558 },
{ lat: 51.506737, lng: -0.203296 },
{ lat: 51.505841, lng: -0.202894 },
{ lat: 51.50503, lng: -0.202407 },
{ lat: 51.504359, lng: -0.202 },
{ lat: 51.503979, lng: -0.203986 },
{ lat: 51.505132, lng: -0.204652 },
{ lat: 51.504314, lng: -0.207929 },
{ lat: 51.50485, lng: -0.208263 },
{ lat: 51.504698, lng: -0.208794 },
{ lat: 51.50548, lng: -0.209299 },
{ lat: 51.505231, lng: -0.210223 },
{ lat: 51.505093, lng: -0.21072 },
{ lat: 51.505384, lng: -0.211053 },
{ lat: 51.505344, lng: -0.211453 },
{ lat: 51.505514, lng: -0.211823 },
{ lat: 51.505348, lng: -0.211854 },
{ lat: 51.505309, lng: -0.211988 },
{ lat: 51.505195, lng: -0.212567 },
{ lat: 51.504979, lng: -0.213457 },
{ lat: 51.504719, lng: -0.213341 },
{ lat: 51.50446, lng: -0.21386 },
{ lat: 51.50409, lng: -0.214612 },
{ lat: 51.503675, lng: -0.21538 },
{ lat: 51.503819, lng: -0.215575 },
{ lat: 51.503955, lng: -0.215803 },
{ lat: 51.504157, lng: -0.216115 },
{ lat: 51.504697, lng: -0.216664 },
{ lat: 51.505006, lng: -0.216933 },
{ lat: 51.505154, lng: -0.217028 },
{ lat: 51.506635, lng: -0.218002 },
{ lat: 51.507697, lng: -0.218438 },
{ lat: 51.509346, lng: -0.219019 },
{ lat: 51.510592, lng: -0.219563 },
{ lat: 51.510783, lng: -0.218558 },
{ lat: 51.510973, lng: -0.218644 },
{ lat: 51.51139, lng: -0.217159 },
{ lat: 51.511867, lng: -0.217508 },
{ lat: 51.512312, lng: -0.217786 },
{ lat: 51.513191, lng: -0.217742 },
{ lat: 51.513566, lng: -0.217693 },
{ lat: 51.513786, lng: -0.217376 },
{ lat: 51.514472, lng: -0.216459 },
{ lat: 51.514837, lng: -0.215982 },
{ lat: 51.514681, lng: -0.214373 },
{ lat: 51.514809, lng: -0.214046 },
{ lat: 51.51498, lng: -0.214358 },
{ lat: 51.515125, lng: -0.21464 },
{ lat: 51.515283, lng: -0.214953 },
{ lat: 51.515408, lng: -0.215209 },
{ lat: 51.51574, lng: -0.214768 },
{ lat: 51.51602, lng: -0.214328 },
{ lat: 51.51621, lng: -0.214002 },
{ lat: 51.516432, lng: -0.213602 },
{ lat: 51.516688, lng: -0.21307 },
{ lat: 51.516888, lng: -0.212534 },
{ lat: 51.516994, lng: -0.212201 },
{ lat: 51.517134, lng: -0.211736 },
{ lat: 51.517035, lng: -0.211667 },
{ lat: 51.517105, lng: -0.211376 },
{ lat: 51.516988, lng: -0.211305 },
{ lat: 51.517082, lng: -0.210853 },
{ lat: 51.517141, lng: -0.210545 },
{ lat: 51.516732, lng: -0.210296 },
{ lat: 51.516876, lng: -0.209659 },
{ lat: 51.517014, lng: -0.209062 },
{ lat: 51.517877, lng: -0.209587 },
{ lat: 51.518054, lng: -0.208841 },
{ lat: 51.518286, lng: -0.208129 },
{ lat: 51.518492, lng: -0.20758 },
{ lat: 51.518784, lng: -0.207045 },
{ lat: 51.519139, lng: -0.206478 },
{ lat: 51.519616, lng: -0.205846 },
{ lat: 51.520117, lng: -0.205226 },
{ lat: 51.520539, lng: -0.204596 },
{ lat: 51.520834, lng: -0.204102 },
{ lat: 51.521147, lng: -0.203341 },
{ lat: 51.521347, lng: -0.202625 },
{ lat: 51.521484, lng: -0.202017 },
{ lat: 51.521577, lng: -0.201501 },
{ lat: 51.521621, lng: -0.201069 },
{ lat: 51.521142, lng: -0.200714 },
{ lat: 51.520706, lng: -0.200381 },
{ lat: 51.520257, lng: -0.200017 },
{ lat: 51.519936, lng: -0.199719 },
{ lat: 51.519321, lng: -0.19918 },
{ lat: 51.518564, lng: -0.198376 },
{ lat: 51.518482, lng: -0.198646 },
{ lat: 51.5182, lng: -0.198452 },
{ lat: 51.517723, lng: -0.198155 },
{ lat: 51.517866, lng: -0.198674 },
{ lat: 51.517713, lng: -0.199232 },
{ lat: 51.517543, lng: -0.199123 },
{ lat: 51.517442, lng: -0.199467 },
{ lat: 51.517221, lng: -0.199317 },
{ lat: 51.517042, lng: -0.200034 },
{ lat: 51.516869, lng: -0.199919 },
{ lat: 51.51666, lng: -0.199702 },
{ lat: 51.516671, lng: -0.19937 },
{ lat: 51.515998, lng: -0.199152 },
{ lat: 51.515835, lng: -0.199152 },
{ lat: 51.515473, lng: -0.19917 },
{ lat: 51.515328, lng: -0.199102 },
{ lat: 51.515319, lng: -0.198636 },
{ lat: 51.515311, lng: -0.198433 },
{ lat: 51.515027, lng: -0.198351 },
{ lat: 51.515126, lng: -0.197644 },
{ lat: 51.515567, lng: -0.197507 },
{ lat: 51.515579, lng: -0.197053 },
{ lat: 51.515289, lng: -0.196986 },
{ lat: 51.515302, lng: -0.196312 },
{ lat: 51.515353, lng: -0.195184 },
{ lat: 51.515069, lng: -0.195067 },
{ lat: 51.514918, lng: -0.195032 },
{ lat: 51.514796, lng: -0.195232 },
{ lat: 51.514608, lng: -0.195556 },
{ lat: 51.514356, lng: -0.195169 },
{ lat: 51.514108, lng: -0.195138 },
{ lat: 51.514091, lng: -0.195507 },
{ lat: 51.514209, lng: -0.195559 },
{ lat: 51.514158, lng: -0.196059 },
{ lat: 51.513977, lng: -0.195994 },
{ lat: 51.513696, lng: -0.196288 },
{ lat: 51.513425, lng: -0.196522 },
{ lat: 51.513344, lng: -0.196312 },
{ lat: 51.512859, lng: -0.196239 },
{ lat: 51.512816, lng: -0.196908 },
{ lat: 51.512375, lng: -0.197152 },
{ lat: 51.51223, lng: -0.197723 },
{ lat: 51.512025, lng: -0.197748 },
{ lat: 51.511752, lng: -0.197725 },
{ lat: 51.511592, lng: -0.197712 },
{ lat: 51.511545, lng: -0.197337 },
{ lat: 51.511096, lng: -0.197239 },
{ lat: 51.510389, lng: -0.197132 },
{ lat: 51.510039, lng: -0.197037 },
{ lat: 51.50966, lng: -0.196927 },
{ lat: 51.509219, lng: -0.19679 },
{ lat: 51.509273, lng: -0.196552 },
{ lat: 51.509351, lng: -0.196023 },
{ lat: 51.509481, lng: -0.196054 },
{ lat: 51.50954, lng: -0.19565 },
{ lat: 51.509627, lng: -0.19568 },
{ lat: 51.509741, lng: -0.194873 },
{ lat: 51.509626, lng: -0.194822 },
{ lat: 51.509774, lng: -0.193945 },
{ lat: 51.509903, lng: -0.193127 },
{ lat: 51.509771, lng: -0.193075 },
{ lat: 51.509674, lng: -0.193036 }
]
];
const {
DrawingManager
} = require("react-google-maps/lib/components/drawing/DrawingManager");
const DrawingManagerWrapper = compose(
withProps({
googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_KEY}&v=3.exp&libraries=geometry,drawing,places`,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />
}),
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap
defaultZoom={12}
defaultCenter={new google.maps.LatLng(51.509865, -0.118092)}
>
<DrawingManager
setMap={GoogleMap}
overlaycomplete={props.onComplete}
defaultOptions={{
drawingControl: true,
// drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.POLYGON]
},
polygonOptions: {
fillColor: "#199ee0",
fillOpacity: 0.2,
strokeWeight: 2,
strokeColor: "#113460",
clickable: true,
editable: true,
geodesic: false,
visible: true,
zIndex: 1,
paths: coords
}
}}
/>
</GoogleMap>
));
export default DrawingManagerWrapper;
最佳答案
要从预定义坐标绘制多边形,请使用 Polygon
组件代替,像这样:
<Polygon
path={triangleCoords}
key={1}
editable={true}
options={{
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
}}
/>
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
{ lat: 25.774, lng: -80.19 }
];
Note set
editable
property to true to allow edit polygon via UI
DrawingManager
组件仅用于通过 UI 绘制多边形,因为
The
DrawingManager
class provides a graphical interface for users to draw polygons, rectangles, polylines, circles, and markers on the map
/* global google */
import React, { Component } from "react";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Polygon
} from "react-google-maps";
import { DrawingManager } from "react-google-maps/lib/components/drawing/DrawingManager";
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
{ lat: 25.774, lng: -80.19 }
];
function Map(props) {
const {zoom,center} = props;
return (
<GoogleMap
defaultZoom={zoom}
defaultCenter={center}
>
<Polygon
path={triangleCoords}
key={1}
editable={true}
options={{
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
}}
/>
<DrawingManager
defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.POLYGON]
},
polygonOptions: {editable:true}
}}
/>
</GoogleMap>
);
}
export default withScriptjs(withGoogleMap(Map));
关于reactjs - 如何使用 DrawingManager 从 "react-google-maps"重绘多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57908715/
这是关于非标准属性的。 https://facebook.github.io/react/docs/tags-and-attributes.html 在 react 中我做了这个: React.cr
我制作了 2 个组件:1)内容(使用 fetch() 显示数据)2)分页(共5页,每页16个对象) 我创建了 2 个状态变量,分别称为 start:0 和 end:16。现在,每当用户单击页码时,我都
我们正在使用 ReactJS 创建一个搜索前端。要求是当用户单击文档名称时,该文档必须在嵌入式查看器中打开。有人为此使用过任何 ReactJS 组件吗?否则,我应该使用 JQuery 查看器组件吗?请
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 1 年前。
我现有的项目: 前端框架 - PHP Codeigniter 和 PHP Laravel 后端框架 - JAVA Springboot 我正在尝试将前端框架更改为 ReactJS。我想知道与 Reac
我有一个实现刷新授权 token 的方案。在这种情况下,我为每种操作(发布、获取、删除)实现了一个通用操作,并使用参数调用它们。 export function Get(param) { return
我现在有 { _this.setState({startDate: input})}}/> 无论我一直在改变什么(onChange 部分到 ref 等等),当我 console.log 我的状态时,
我在两个不同的文件中有两个单独的组件 组件A 和 组件B 我在 中有一个按钮组件B 现在我想测试当 中的特定按钮时组件B 被点击,组件A 应呈现如下: import { render, screen,
我有一个包含几个问题的表格。一些问题有一组子问题。 这些是使用以下代码呈现的。 { Object.keys(this.props.moduleDetails.questions).map(
我有两个组件。第一个状态初始化: import React from 'react'; class One extends React.Component { constructor(prop
我的项目是一个对象数组,我只获取名称并在 3 in 3 的屏幕上渲染,使用“下一个”和“上一个”按钮更改名称,并且可以过滤字母。 我想要添加一个新值,在输入中键入并单击按钮添加。 我的代码按钮: ad
我有一个组件实例,应该从不同的地方更新。如何从其他几个组件中更新此组件的 props? class ParentComponent extends React.Component { ...
我想问,是否可以基于变量返回一个组件,我的想法是否可以: var location = this.props.location // Eg. Asia,Australia 我的问题是我需要单独手动导
有没有办法在渲染后立即选择要覆盖的文本?我的意思是选择 - 最佳答案 您可以尝试使用两种方法.focus和.select .focus() method sets focus on the speci
我渲染了以下内容: 这是事件处理程序: handleCompanySubmit(event) { console.log("company submit") e
作为ReactJS的初学者,我现在使用出色的ReactJS Datepicker。有关我的自定义日期格式的问题: 我没有找到任何文档来解释所有可能性,例如M是月份,MM是2个字母的月份,依此类推。(我
我创建了一个表并正在对其进行过滤,但是当我清除搜索查询时,表数据不会显示,并且表会卡在查询结果上。SearchBox 是文本框,TableData 是表格,在 Container 中我正在更改 Sea
我在表格设置中有图标,这样当单击图标时,会呈现不同的图标。现在这工作正常,但我想为我单击的行中的特定行重新呈现不同的图标,而不是在每一行中重新呈现不同的图标。不知道我将如何去做这件事。这是我的代码:
我正在尝试使用 React 构建一个简单的应用程序,它有两个组件,一个嵌入另一个组件。子组件是一个收缩的菜单,单击它时,它会展开。我希望能够在单击父元素或子元素失去焦点时重新收缩它。 这是父组件的样子
我需要知道 REACT JS 或 HTML5 中是否有任何 API 可以提供用户不活动时自动注销的功能。我的代码如下,我不知道出了什么问题,它给了我错误 startTimer 未定义和不必要的绑定(b
我是一名优秀的程序员,十分优秀!