标签: react-google-maps
标记未在本地主机 next.js 上显示 @react-google-maps/api
我知道有类似的问题...但没有任何答案可以回答我的问题
我正在尝试向我的谷歌地图添加一个标记，但当我在本地运行该项目时它没有显示（在我的实时站点上它工作正常）
这是我的组件
import { React, useMemo } from "react";
import { GoogleMap, Marker, useJsApiLoader } from "@react-google-maps/api";
import MapContainerStyles from "./styles/MapContainerStyles";
const Map = () => {
const { isLoaded } = useJsApiLoader({
googleMapsApiKey: API_KEY,
});
const center = useMemo(() => ({ lat: -30.292038, lng: 153.118896 }), []);
const onLoad = (marker) => {
console.log("marker: ", marker);
};
const options = {
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
};
if (!isLoaded) return <div>Loading...</div>;
return (
<GoogleMap zoom={15} options={options} center={center} …推荐指数
解决办法
查看次数
InfoWindow 使用react-google-maps 显示两个信息窗口
我正在使用react-google-maps库，到目前为止我一直做得很好。我的应用程序从我的后端接收带有位置的 json，我正在映射它们以在地图上添加标记，它们显示得很好。这些标记有一个 OnClick 函数，用于设置 ReactHook 上的信息。
当我的钩子状态发生变化时，我的信息窗口会触发并自动显示，这很好。问题是一个小信息窗口没有与另一个同时触发的信息，我已经尝试找到错误几个小时了，但找不到它，我已经检查了代码，而且我是从浏览器检查组件，但反应开发人员工具无法识别那个小信息窗口。
这是我的代码：
function Map(props){
const [selectedTienda, setSelectedTienda] = useState(null)
const options ={
styles: MapStyles,
disableDefaultUI: true,
}
return(
<GoogleMap
defaultZoom={17}
defaultCenter={{lat: 29.0824139, lng: -110.966389}}
options={options}
>
{props.items.map(tienda =>(
<Marker
key={tienda['tienda.id']}
position={{
lat: parseFloat(tienda['tienda.ubicacion.lat']),
lng: parseFloat(tienda['tienda.ubicacion.lng'])
}}
onClick={()=>{
setSelectedTienda(tienda);
}}
/>
))}
{selectedTienda ? (
<InfoWindow position={{
lat: parseFloat(selectedTienda['tienda.ubicacion.lat']),
lng: parseFloat(selectedTienda['tienda.ubicacion.lng'])
}}
onCloseClick={()=>{setSelectedTienda(null)}}
>
<div><h4>This is the <br/>INFOWINDOW I WANT</h4></div>
</InfoWindow>
): null}
</GoogleMap>
)
}
const MyMapComponent = withScriptjs(withGoogleMap(Map))
这也是我的噩梦的图像：
这是我的反应开发工具所显示的内容，这只是主信息窗口
google-maps infowindow reactjs react-google-maps react-hooks
推荐指数
解决办法
查看次数
@react-google-maps/api <GoogleMap> onClick 不起作用
我正在使用 @react-google-maps/api 库，包中的所有内容都工作正常。
现在我刚刚注意到组件的 onClick 事件已失去其功能，并且在我的网站中附加到它的功能无法正常工作。我认为我没有更改与 onClick 功能相关的任何代码。
这很容易看出，因为我还在内部使用了可点击标记，并且当将鼠标悬停在这些标记上时，它保持为“拖动手”并且不会更改为“指向手”。
我还有带有标题道具的标记。现在，如果我将鼠标悬停在其上，标题将不会出现。
我尝试通过正常的控制台登录来测试这一点，但控制台仍然为空。
下图显示了具有 onClick 事件的基本组件，并且 onClick 事件不起作用。
我可能错过了一些东西，但这只是突然出现在正在运行的应用程序中，我对此感到困惑。
我正在使用： "@react-google-maps/api": "^2.2.0"，
导入是基本的：
import {
GoogleMap,
Marker,
Polygon,
useJsApiLoader,
} from '@react-google-maps/api';
推荐指数
解决办法
查看次数
如何使用React与Google Places API一起在Google地图上显示地点标记？
我正在尝试在Airbnb上构建类似的地图,您可以在拖动地图时查看地点标记.我想在地图上显示Google Places API中的"酒店"标记.
使用谷歌地图中的以下JS代码我可以在谷歌地图上显示酒店,但我想使用反应谷歌地图使用React .
<!DOCTYPE html>
<html>
<head>
<title>Place searches</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
// This example requires the Places library. …javascript google-maps-api-3 google-places-api reactjs react-google-maps
推荐指数
解决办法
查看次数
当位置改变时重新定位地图的中心？
大家好，我正在使用react-google-maps图书馆。每次我的位置发生变化时，我都试图重新调整我的地图（缩放标记所在的位置），但我对如何实现整个事情有点迷茫。我可以看到标记正在更新，但地图保持在其defaultCenter位置。
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
GoogleMap,
Marker,
withScriptjs,
withGoogleMap
} from 'react-google-maps';
import environment from '../../config/environment';
class Map extends Component {
static propTypes = {
defaultZoom: PropTypes.number,
center: PropTypes.shape({
lat: PropTypes.number,
lng: PropTypes.number
}),
location: PropTypes.shape({
lat: PropTypes.number,
lng: PropTypes.number
}),
onPositionChanged: PropTypes.func
};
static defaultProps = {
defaultZoom: 14,
center: {
lat: 60.1699,
lng: 24.9384
},
location: {},
onPositionChanged: () => {}
};
constructor(props) {
super(props); …推荐指数
解决办法
查看次数
google-map-react 和 react-google-maps 的区别
谷歌地图 API 有两种最流行的反应抽象（从每周 npm 下载量和 github repo 星数来看）。对于像我这样的初学者来说，这非常令人困惑，因为我无法决定这些库能为我的项目带来什么，而不是仅仅通过查看文档来决定什么？
简而言之，使用google-map-react和react-google-maps 的优缺点是什么。我没有在互联网或 SO 上找到任何比较。
google-maps-api-3 reactjs react-google-maps google-map-react
推荐指数
解决办法
查看次数
一旦有界限，如何在react-google-map中使用fitBounds
我到底在哪里调用 fitBounds 或 map.fitbounds 。一旦我有了界限或如何使用它，我就很困惑该把它放在哪里。我已将边界设置为本地边界状态。
我在这里看过这篇文章react-google-maps：how to use fitBounds, panBy, panTo, panToBounds public APIs? 要么我只是做不同的事情，要么因为它对我来说没有多大意义。
我创建了一个bounds常量，然后每次我做一个标记时，我都会将其中每个添加到边界中bounds.extends(Marker in here)
代码有点乱，所以我会指出我在其中执行此操作的位置。里面filterItemsByRadius是我创建和设置边界的地方。在地图函数的末尾，我认为将边界状态设置为边界。
/* global google */
import { default as React, Component } from 'react';
import raf from 'raf';
import canUseDOM from 'can-use-dom';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import {
withGoogleMap,
GoogleMap,
Circle,
InfoWindow,
Marker,
withScriptjs,
} from 'react-google-maps';
import geolib from 'geolib';
import { geolocated } from 'react-geolocated';
import …推荐指数
解决办法
查看次数
当我单击单个标记时，React Google Map InfoWindow 会显示所有信息
出于某种原因，当我单击单个标记时，所有 InfoWindow 都会出现。当我单击一个标记时，我预计会显示一个 InfoWindow。有人可以解释为什么所有标记中的所有信息窗口都会出现吗？所以当我关闭它时，InfoWindow 也会关闭。
当我单击目标标记时，预期行为是 InfoWindow 打开。
class VenuesMap extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
};
}
handleToggleOpen = () => {
this.setState({
isOpen: true,
});
};
handleToggleClose = () => {
this.setState({
isOpen: false,
});
};
render() {
const venues = this.props.venues;
let markers;
let userMarkers = (
<Marker
position={{
lat: Number(latCurrentLocation),
lng: Number(lngCurrentLocation),
}}
/>
);
if (venues !== null) {
markers = venues.map((location, i) => {
const lat = location.venue.location.lat;
const …推荐指数
解决办法
查看次数
如何在react-google-maps中弯曲折线？
我是 React 的新手，一直在玩 react-google-maps 包。我正在尝试弯曲连接两个地方的折线。阅读完文档后，我尝试将曲线折线函数合并到“可编辑”道具下。
这是弯曲折线的函数：
var map;
var curvature = 0.4; // Arc of the Polyline
function init() {
var Map = google.maps.Map,
LatLng = google.maps.LatLng,
LatLngBounds = google.maps.LatLngBounds,
Marker = google.maps.Marker,
Point = google.maps.Point;
// Initial location of the points
var pos1 = new LatLng(this.state.srcMarker);
var pos2 = new LatLng(this.state.desMarker);
var bounds = new LatLngBounds();
bounds.extend(pos1);
bounds.extend(pos2);
map = new Map(document.getElementById('map-canvas'), {
center: bounds.getCenter(),
zoom: 12
});
map.fitBounds(bounds);
var markerP1 = new Marker({
position: pos1,
map: map
}); …推荐指数
解决办法
查看次数
React-Google 地图车辆实时跟踪
我正在尝试通过从 api 端点获取数据来移动带有 deviceId 的选定标记。第一次渲染时，我获取最后 1 分钟的坐标数据，并将坐标推送到声明为 Path 的空数组中，每 30 秒后，我运行一个 setinterval 函数，该函数每 30 秒获取最后 30 秒的数据，然后推送Path 数组中的坐标。这是可以提供一些想法的代码：
import {
withGoogleMap,
withScriptjs,
GoogleMap,
Polyline,
Marker
} from "react-google-maps";
const mapStyles = require("./mapStyles.json");
const Map = ({deviceId}) => {
const [progress, setProgress]= useState()
const path= []
const getInitialPositions = async () => {
let from = new Date()
let milliseconds = Date.parse(from)
milliseconds = milliseconds - (1* 60 * 1000)
from = new Date(milliseconds).toISOString()
console.log(from)
const to = new Date().toISOString()
console.log(to) …推荐指数
解决办法
查看次数