Javascript 谷歌地图的反应-使我的标记可点击

所以我有点迷路了，我试了几个密码。我设法实现了标记，但是我认为我做了一些不正确的事情，使它们实际上可以点击并显示一个信息窗口

默认情况下，

标记

不可单击，除了传递onClick处理程序外，还需要传递

可单击

属性

---

您可以查看文档中的所有

标记

道具：

您已经混合了

反应谷歌地图

和

谷歌地图反应

。以下是您案例的工作示例： 请在url中添加您的APIkey

App.js

import React from "react";
import ReactDOM from "react-dom";

const { compose, withProps, withStateHandlers } = require("recompose");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
} = require("react-google-maps");
const { InfoBox } = require("react-google-maps/lib/components/addons/InfoBox");


const App = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=**YOUR_API_KEY**&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
    center: { lat: 25.03, lng: 121.6 },
  }),
  withStateHandlers(() => ({
    isOpen: false,
  }), {
      onToggleOpen: ({ isOpen }) => () => ({
        isOpen: !isOpen,
      })
    }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={5}
    defaultCenter={props.center}
  >

    <Marker
      position={{ lat: 22.6273, lng: 120.3014 }}
      onClick={props.onToggleOpen}
    >
      {props.isOpen && <InfoBox
        onCloseClick={props.onToggleOpen}
        options={{ closeBoxURL: ``, enableEventPropagation: true }}
      >
        <div style={{ backgroundColor: `yellow`, opacity: 0.75, padding: `12px` }}>
          <div style={{ fontSize: `16px`, fontColor: `#08233B` }}>
            no search place
          </div>
        </div>
      </InfoBox>}
    </Marker>
  </GoogleMap>
);
export default App;

App.js
从“React”导入React；
从“react dom”导入react dom；
const{compose，withProps，withstateholders}=require（“重新组合”）；
常数{
用ScriptJS，
用谷歌地图，
谷歌地图，
标记
}=要求（“反应谷歌地图”）；
const{InfoBox}=require（“react google maps/lib/components/addons/InfoBox”）；
const App=compose(
用道具({
谷歌地图网址：https://maps.googleapis.com/maps/api/js?key=**您的_API_KEY**&v=3.exp&libraries=geometry，drawing，places“，
加载元素：，
集装箱运输：，
mapElement:，
中心：{lat:25.03，lng:121.6}，
}),
withStateHandlers（（）=>({
伊索彭：错，
}), {
onToggleOpen:（{isOpen}）=>（）=>({
伊索本：！伊索本，
})
}),
用ScriptJS，
用谷歌地图
)（道具=>
{props.isOpen&&
没有搜索的地方
}
);
导出默认应用程序；

react GoogleMaps使用Recose是基于智能组件的，但您也可以使其成为类基础组件

这是正在工作的codesandbox（暂时处于活动状态）： 别忘了添加API密钥。

---

请随意提问。

您能在这里分享codesandbox吗？解决这个问题会更容易。我建议使用谷歌地图，因为它的社区很强大。让我为它制作一个工作代码沙盒you@SakhiMansoor非常感谢。嘿，谢谢你的帮助！我还是不知道怎么做。地图上的其他所有东西都可以点击，但我的记号笔不可以。哦，哇，你太棒了！难怪我在混合了这两个lol后遇到了麻烦。现在，如果我实现了你的代码，我的Maps.js就完全没用了。编辑：我仍然需要让标记在单击它时改变颜色，并在那里实现一个带有FourSquare或其他链接的信息窗口。。。我应该在你的代码中这样做，还是为Foursquare创建另一个.js文件？很高兴能帮助你。等等，我刚刚注意到代码不允许我添加更多标记？如何添加更多标记？如果我尝试在那里添加任何标记，我会立即出错。所以一切都很顺利。我不得不从头开始重新做我的事情，因为我很难理解所有事情背后的逻辑，但非常感谢！不管怎样，我再次需要你的帮助。这是我的沙盒：由于某些原因，我的标记在单击时不会改变颜色。我还想弄清楚如何在那里实现一个信息框，哈哈。你知道当点击信息窗口时如何在信息窗口内实现一个四方窗口吗？