在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:google-map-react/google-map-react开源软件地址:https://github.com/google-map-react/google-map-react开源编程语言:JavaScript 97.7%开源软件介绍:Google Map React ·
It allows you to create interfaces like this example (You can scroll the table, zoom/move the map, hover/click on markers, and click on table rows) Getting startedIn the simple case you just need to add import React from "react";
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
export default function SimpleMap(){
const defaultProps = {
center: {
lat: 10.99835602,
lng: 77.01502627
},
zoom: 11
};
return (
// Important! Always set the container height explicitly
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "" }}
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
>
<AnyReactComponent
lat={59.955413}
lng={30.337844}
text="My Marker"
/>
</GoogleMapReact>
</div>
);
} My map doesn't appear!
Installationnpm:
yarn:
FeaturesWorks with your ComponentsInstead of the default Google Maps markers, balloons and other map components, you can render your cool animated react components on the map. Isomorphic RenderingIt renders on the server. (Welcome search engines) (you can disable javascript in browser dev tools, and reload any example page to see how it works) Component Positions Calculated Independently of Google Maps APIIt renders components on the map before (and even without) the Google Maps API loaded. Google Maps API Loads on DemandThere is no need to place a Use Google Maps APIYou can access to Google Maps ...
const handleApiLoaded = (map, maps) => {
// use map and maps objects
};
...
<GoogleMapReact
bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
>
<AnyReactComponent
lat={59.955413}
lng={30.337844}
text="My Marker"
/>
</GoogleMapReact> PST: Remember to set Internal Hover AlgorithmNow every object on the map can be hovered (however, you can still use css hover selectors if you want). If you try zooming out here example, you will still be able to hover on almost every map marker. Examples
DocumentationYou can find the documentation here:
ContributeLocal development is broken into two parts (ideally using two tabs). First, run rollup to watch your npm start # runs rollup with watch flag The second part will be running the # (in another tab)
cd example
npm start # runs create-react-app dev server Now, anytime you make a change to your library in Manual link-installIf you get the error
npm link
npm link google-map-react LicenseKnown Issues
!!! We are looking for contributorsWe're actively looking for contributors, please send a message to the Owner or any of the Collaborators. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论