如何在 react-google-maps 中嵌入 textview?
How to embed textview in react-google-maps?
如何在 react-google-maps 中嵌入 textview?我已经使用 react-google-maps api 在 React 中成功创建了一个 google 地图页面。这就是我使用折线插入标记和 link 标记的方式。
import React from "react";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
Polyline
} from "react-google-maps";
const pathCoordinates = [
{ lat: 1.322459, lng: 103.853972 },
{ lat: 1.39227, lng: 103.752 }
];
const CustomSkinMap = withScriptjs(
withGoogleMap(props => (
<GoogleMap
defaultZoom={12}
defaultCenter={{ lat: 1.322459, lng: 103.853972 }}
defaultOptions={{
scrollwheel: false,
zoomControl: true,
styles: [
{
featureType: "water",
stylers: [
{ saturation: 43 },
{ lightness: -11 },
{ hue: "#0088ff" }
]
},
{
featureType: "road",
elementType: "geometry.fill",
stylers: [
{ hue: "#ff0000" },
{ saturation: -100 },
{ lightness: 99 }
]
},
{
featureType: "road",
elementType: "geometry.stroke",
stylers: [{ color: "#808080" }, { lightness: 54 }]
},
{
featureType: "landscape.man_made",
elementType: "geometry.fill",
stylers: [{ color: "#ece2d9" }]
},
{
featureType: "poi.park",
elementType: "geometry.fill",
stylers: [{ color: "#ccdca1" }]
},
{
featureType: "road",
elementType: "labels.text.fill",
stylers: [{ color: "#767676" }]
},
{
featureType: "road",
elementType: "labels.text.stroke",
stylers: [{ color: "#ffffff" }]
},
{ featureType: "poi", stylers: [{ visibility: "off" }] },
{
featureType: "landscape.natural",
elementType: "geometry.fill",
stylers: [{ visibility: "on" }, { color: "#b8cb93" }]
},
{ featureType: "poi.park", stylers: [{ visibility: "on" }] },
{
featureType: "poi.sports_complex",
stylers: [{ visibility: "on" }]
},
{ featureType: "poi.medical", stylers: [{ visibility: "on" }] },
{
featureType: "poi.business",
stylers: [{ visibility: "simplified" }]
}
]
}}
>
<Marker label= {"1"} position={{ lat: 1.322459, lng: 103.853972 }} />
<Marker label= {"2"} position={{ lat: 1.39227, lng: 103.752 }} />
<Polyline
path={pathCoordinates}
geodesic={true}
options={{
strokeColor: "#ff2527",
strokeOpacity: 0.75,
strokeWeight: 2
}}
/>
</GoogleMap>
))
);
function Maps({ ...props }) {
return (
<CustomSkinMap
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100vh` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
);
}
export default Maps;
但是,我不知道如何在这张 google 地图中嵌入文本视图。我想添加一个文本视图让用户 select 约会然后从数据库中读取数据。
我找到了解决方案,只需创建一个 css 文件,然后将 z-index 设置为 100 和 top:70px right:20px width:220px 即可。然后文本视图将显示在地图的右上角。
如何在 react-google-maps 中嵌入 textview?我已经使用 react-google-maps api 在 React 中成功创建了一个 google 地图页面。这就是我使用折线插入标记和 link 标记的方式。
import React from "react";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
Polyline
} from "react-google-maps";
const pathCoordinates = [
{ lat: 1.322459, lng: 103.853972 },
{ lat: 1.39227, lng: 103.752 }
];
const CustomSkinMap = withScriptjs(
withGoogleMap(props => (
<GoogleMap
defaultZoom={12}
defaultCenter={{ lat: 1.322459, lng: 103.853972 }}
defaultOptions={{
scrollwheel: false,
zoomControl: true,
styles: [
{
featureType: "water",
stylers: [
{ saturation: 43 },
{ lightness: -11 },
{ hue: "#0088ff" }
]
},
{
featureType: "road",
elementType: "geometry.fill",
stylers: [
{ hue: "#ff0000" },
{ saturation: -100 },
{ lightness: 99 }
]
},
{
featureType: "road",
elementType: "geometry.stroke",
stylers: [{ color: "#808080" }, { lightness: 54 }]
},
{
featureType: "landscape.man_made",
elementType: "geometry.fill",
stylers: [{ color: "#ece2d9" }]
},
{
featureType: "poi.park",
elementType: "geometry.fill",
stylers: [{ color: "#ccdca1" }]
},
{
featureType: "road",
elementType: "labels.text.fill",
stylers: [{ color: "#767676" }]
},
{
featureType: "road",
elementType: "labels.text.stroke",
stylers: [{ color: "#ffffff" }]
},
{ featureType: "poi", stylers: [{ visibility: "off" }] },
{
featureType: "landscape.natural",
elementType: "geometry.fill",
stylers: [{ visibility: "on" }, { color: "#b8cb93" }]
},
{ featureType: "poi.park", stylers: [{ visibility: "on" }] },
{
featureType: "poi.sports_complex",
stylers: [{ visibility: "on" }]
},
{ featureType: "poi.medical", stylers: [{ visibility: "on" }] },
{
featureType: "poi.business",
stylers: [{ visibility: "simplified" }]
}
]
}}
>
<Marker label= {"1"} position={{ lat: 1.322459, lng: 103.853972 }} />
<Marker label= {"2"} position={{ lat: 1.39227, lng: 103.752 }} />
<Polyline
path={pathCoordinates}
geodesic={true}
options={{
strokeColor: "#ff2527",
strokeOpacity: 0.75,
strokeWeight: 2
}}
/>
</GoogleMap>
))
);
function Maps({ ...props }) {
return (
<CustomSkinMap
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100vh` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
);
}
export default Maps;
但是,我不知道如何在这张 google 地图中嵌入文本视图。我想添加一个文本视图让用户 select 约会然后从数据库中读取数据。
我找到了解决方案,只需创建一个 css 文件,然后将 z-index 设置为 100 和 top:70px right:20px width:220px 即可。然后文本视图将显示在地图的右上角。