标签: react-google-maps

我目前正在使用react-google-maps构建一个谷歌地图API，我想创建多个标记来在信息窗口上显示世界各地城市的信息。但由于它们都是来自 html 对象。每当我单击一个标记时，所有信息窗口都会打开。如果有办法解决这个问题吗？示例代码：

<GoogleMap
    defaultZoom={3}
    defaultCenter={{ lat: 40.452906, lng: 190.818206 }}
  >
    <Marker id = "mark1"
      options={{icon: Mark1}} 
      position={{ lat: 34.4076645, lng: 108.742099 }}
      onClick={props.onToggleOpen}
    >
      {props.isOpen && <InfoWindow id = "info1"
                    onCloseClick={props.onToggleOpen}
                    >
                    <div> content1 </div>
      </InfoWindow>}
    </Marker>
    <Marker
      options={{icon: Mark2}} 
      position={{ lat: 35.6958783, lng: 139.6869534 }}
      onClick={props.onToggleOpen}
    >
      {props.isOpen && <InfoWindow
                    onCloseClick={props.onToggleOpen}
                    >
                    <div> content2 </div>
      </InfoWindow>}
    </Marker>
</GoogleMap>

编辑：根据指南，有一个名为 getMetadata() 的方法。我如何使用它来返回道具？

描述：

使用 React-google-maps 包，我已经能够使用自己的 kml 文件加载 Google 地图。该 KML 文件包含多个形状，每个形状背后都有元数据。我想要的是，当用户单击这些形状之一时，他会在弹出窗口中看到形状背后的数据。

例子

假设我有一个 Google 地图，其中包含显示两个国家/地区的 kml 文件。用户将鼠标悬停在这些国家/地区之一上，会看到一个弹出窗口，显示他所在的国家/地区。他将鼠标悬停在第二个国家上空并得到相同的结果。当他单击该国家/地区的 KML 形状时，他会收到更多信息。

这需要我了解一些事情：

- 如何在 KML 形状上创建悬停效果以显示基于形状的数据
- 如何在 KML 形状上创建单击事件以显示基于形状的数据

但是，我无法理解如何使这个 KML 文件具有交互性。
这是我到目前为止所拥有的：

import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker, KmlLayer } from "react-google-maps"

const MyMapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: 50.5010789, lng: 4.4764595 }}
  >
    <KmlLayer 
        url='https://example.be/kmlfile.kml'
        options={{ preserveViewport : false}}
    />
    {props.isMarkerShown && <Marker position={{ lat: 50.5010789, …

我正在尝试通过从 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) …

我正在使用@react-google-maps/api在我的 React Web 应用程序中显示 Google 地图。根据他们的文档，我添加了标记，如下所示。

        <Marker
            onLoad={onLoad}
            position={location}
            
            icon={{
                // path: google.maps.SymbolPath.CIRCLE,
                url:'./../../assets/svg/location_marker.svg',
                scale: 7,
            }}
        />

Run Code Online (Sandbox Code Playgroud)

但它似乎不起作用。没有显示任何标记。使用google.maps.SymbolPath.CIRCLEaspath将显示标记图标。以前有人遇到过这个问题吗？有任何想法吗？

可编辑的示例代码如何在以下代码中使用航点 航点是否有助于绘制我在数据库中更新的方式，无论 ponits 将基于我更新的点

const DirectionsService = new google.maps.DirectionsService();
                 const  DirectionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true},{strokeColor:"#4a4a4a"});

      DirectionsService.route({

        origin: new google.maps.LatLng(this.state.orgin.latitude ,this.state.orgin.longitude),
         destination: new google.maps.LatLng(this.state.destination.latitude ,this.state.destination.longitude),
          travelMode: google.maps.TravelMode.DRIVING,

      }, 
       (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          this.setState({
            directions: result,
          });
        } else {
          console.error(`error fetching directions ${result}`);
        }
      });

            }).catch(function (err) {

            });

    }

  })

)(props =>
  <GoogleMap
    defaultZoom={50}>
     <DirectionsRenderer directions={props.directions}   />

  < Marker

  position={{  lat:props.delivery!=undefined?props.delivery.latitude:null, lng:  props.delivery!=undefined?props.delivery.longitude:null }} />

  </GoogleMap>

);
    return (
      <MapWithADirectionsRenderer />
    )
  }

我正在尝试使用react-google-maps 库构建一个反应项目。

基本上它计算两点之间的最佳路线，并使用上面的库在地图上显示路线。

对于绘图，我使用Polyline和MarkerWithLabel模块：

• 绘制线段的折线
• 放置段开始的标记

我遇到的问题是标签的位置MarkerWithLabel，如果缩放级别设置为适合标签重叠的整个路线。这是因为标记非常接近并且缩放级别很小，这是正常的...

我还附上了2张图片

第一个缩放级别以适合所有路线（其中标记标签重叠）

第二个缩放级别超过一个段（在我们的例子中是蒂米什瓦拉市）以实际查看所有标记

代码MarkerWithLabel如下

const Markers = () => segments.map((segment) => {
  const { marker } = segment;
  const style = styles.vehicles[marker.vehicle.kind];

  return (
    <MarkerWithLabel
      key={marker.key}
      position={{ lat: marker.lat, lng: marker.lng }}
      labelAnchor={new goo.Point(-10, 15)}
      noRedraw
      icon={{
        path: goo.SymbolPath.CIRCLE,
        scale: 4,
        strokeWeight: 2,
        fillOpacity: 1,
        fillColor: '#ff3f10',
        strokeColor: '#ffffff',
      }}
      labelClass="marker-label"
      labelStyle={{
        width: '400px',
        backgroundColor: 'none',
        color: style.color,
      }}
    >
      <div style={{ clearFix: 'both' …

所以当我点击一个标记时，地图总是刷新，我该如何阻止它？单击标记将呈现有关该标记的特定信息，但它总是重新加载并返回其默认中心。

import React, { Component } from "react";
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import maplayout from "./mapstyle.js";


class Map extends Component {
  state = { users: []};

  onClick = (data) => {
    this.props.onClick(data);
  };

  render() {
  const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        defaultCenter={{ lat: 47.507589, lng: 19.066128 }}
        defaultZoom={13}
      >
        {this.props.users.map((element, index) => (
          <Marker
            key = {index}
            icon={require("../assets/seenpinkek.svg")}
            position={{ lat: element.latitude, lng: element.longitude }}
            onClick={() => this.onClick(index)}
          />
        ))}
      </GoogleMap>
    ));
    return (
      <div>
        <GoogleMapExample …

我正在尝试使用 react-google-maps 绘制两点之间的路线，但对我不起作用。你能帮我解决这个问题吗？这是我的反应组件的示例。

import React from 'react';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from 'react-google-maps';
import MapDirectionsRenderer from './app_map_directions_render';

const Map = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultCenter={props.defaultCenter}
      defaultZoom={props.defaultZoom}
    >
      {props.places.map((marker, index) => {
        const position = {lat: marker.latitude, lng: marker.longitude};
        return <Marker key={index} position={position}/>;
      })}
      <MapDirectionsRenderer places={props.places} travelMode={window.google.maps.TravelMode.DRIVING} />
    </GoogleMap>
  ))
);

const AppMap = props => {
  const {places} = props;

  const {
    loadingElement,
    containerElement,
    mapElement,
    defaultCenter,
    defaultZoom
  } = props;

  return (
    <Map
      googleMapURL={
        'https://maps.googleapis.com/maps/api/js?key=' + …

尝试使用 DrawingManager 显示在“react-google-maps”中绘制的预定义坐标

尝试使用“polygonOptions”中的“paths”来实现它，但它没有“paths 属性被忽略，并且新多边形的地图属性始终设置为 DrawingManager 的地图” 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 },
    { …

如何在 React 应用程序中实现标记移动动画。我已经将react-google-maps用于谷歌地图。

我正在浏览该库和 Google 地图 API 的文档。Google Maps API 中有一个偏移选项。但我不是在寻找那个。

该应用程序将通过 socket.io 服务器接收更新的坐标。一旦坐标到达，标记就需要移动，就像 Uber 应用程序一样。

GitHub上有一个未解决的问题，尚未关闭。

目前，我可以移动坐标更新上的标记，但没有动画。

示例代码

import React, { Component } from 'react';
import Socket from 'socket.io-client';
import { withRouter } from 'react-router-dom';
import {
    GoogleMap,
    withScriptjs,
    withGoogleMap,
    Marker
} from 'react-google-maps';

import { googleMapsUrl, socketUrl } from '../../../config/constants';

const io = Socket(socketUrl('dev'));

class GoogleMaps extends Component {
    constructor(props) {
        super(props);
        this.state = {
            defaultCenter: {
                clientId: "FAKE_CLIENT_ID",
                imei:     "FAKE_IMEI_NUMBER",
                lat:      28.554907,
                lng:      77.554385, …