google-map-react是一个基于一小部分Google Maps API编写的组件。它允许您在 Google 地图上渲染任何 React 组件。它是完全同构的，可以在服务器上渲染。此外，即使未加载 Google Maps API，它也可以在浏览器中呈现地图组件。它使用内部的、可调整的悬停算法 - 地图上的每个对象都可以悬停
显示当前的位置 可以一自定义显示的图标或者内容
根据经纬度显示位置标记
import React, { useCallback, useMemo, useState } from "react";
import GoogleMap from "google-map-react";
/**
* zoom:地图的缩放比例 必填
* center:中心坐标 必填
* @param {*} param0
* @returns
*/
// 地图样式
/**
* 1:featureType:包括道路、公园、水体、商家等等。all（默认）选择所有地图项。road 选择所有道路。water 选择水体。
* 2:elementType:在地图上，道路不仅包含图形线条（几何图形）:all（默认）选择指定地图项的所有元素。geometry 选择指定地图项的所有几何元素。labels 选择与指定地图项相关的文本标签。
* 3:stylers:式器是可以应用到地图项和元素的格式设置选项。
*/
const AnyReactComponent = ({ label, color, title }) => (
<div className="dispatch-map-marker">
{label}
</div>
);
//注意经纬度必须是 Number
const optionsList=[
{latitude: 4.76386448220875,longitude: 103.41054148389141,name:'tage1'},
{latitude: 4.753600303948292,longitude: 103.40573496533672,name:'tage2'},
{latitude:3.788971509678922,longitude: 102.1147814825507,name:'tage3'},
{latitude: 3.74271924638295,longitude: 101.25921362603883,name:'tage4'},
]
const MapGoogle = ({ optionsList }) => {
const renderMarks = useMemo(() => {
if (optionsList && optionsList.length) {
return optionsList.map((item) => (
<Tag>{item.name}</Tag>
));
}
return null;
}, [optionsList]);
return (
<div className="relative w-full h-full">
<GoogleMap
bootstrapURLKeys={{ key: }}//谷歌地图的key 密钥
center={{ lat: 3.1388854, lng: 101.6464968,}}
zoom={zoom}
>
{renderMarks}
</GoogleMap>
</div>
);
};
export default MapGoogle;
