问题描述
嗨,我正在构建nextjs应用,我要在其中显示我正在使用google-map-react库的google地图 我有要使用红色标记图钉显示的用户当前位置,我正在用信息窗口显示所有位置,我也想显示当前用户位置。 我正在使用带有yesIWantToUseGoogleMapApiInternals为true的GoogleMapReact。 这是我的map.js文件代码
import GoogleMapReact from 'google-map-react'
import { AsYouType } from 'libphonenumber-js'
import { useState } from 'react';
import {get_location_slug} from '../utility/calculate_distance'
const phoneFormat = new AsYouType('US')
const Marker = (props,location_slug) => `
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<div class="px-2">
<div class="font-bold text-base mb-2 text-blue-500">
<a href=${"/stores/"+location_slug}>
${props.city}
</a>
</div>
<p class="text-dark-400 text-sm">${props.street}</p>
<p class="text-dark-400 text-sm mb-2">
${props.city},${props.stateIso},${props.countryIso},${props.postalCode}
</p>
<p class="text-gray-700 font-medium mb-2">
Phone: <span class="font-light">${phoneFormat.input(props.phone)}</span>
</p>
<p>
<a class="text-blue-500" href="https://www.google.com/maps/dir/'+${props.defaultLat}+','+${props.defaultLng}+'/'+${props.latitude}+','+${props.longitude}+'">
Directions
</a>
</p>
</div>
</div>
`
export default function Map(props) {
const [locations,setLocations ] = useState(props.locations)
const defaultProps = {
center: {
lat: (typeof(props.latitude) === "undefined" ? 34.850033 : props.latitude),lng: (typeof(props.longitude) === "undefined" ? -80.016683: props.longitude),},zoom: 7
}
function handleApiLoaded(map){
let infowindow = new google.maps.InfoWindow()
let markerCenter = 0
props.locations.map((location) => {
let location_slug = get_location_slug(location)
markerCenter == 0 && map.setCenter(new google.maps.LatLng(location.latitude,location.longitude))
markerCenter = 1
let marker = new google.maps.Marker({position: {lat: parseFloat(location.latitude),lng: parseFloat(location.longitude)},map: map,title: location.name})
marker.setIcon('https://test.com/img/markers/orange.png')
marker.addListener('click',function() {
infowindow.close()
infowindow.setContent(Marker(location,location_slug))
infowindow.open(map,marker)
})
})
}
return (
<div style={{ height: '100%',width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: `${process.env.GOOGLE_API_KEY}` }}
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map }) => handleApiLoaded(map)}
key={props.locations}
/>
</div>
)
}
I am showing all locations pins as well on my map with zoom,PLease suggest what I should add in this. Please suggest options which I can add to GoogleMapReact component to show current location as well with different marker.
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)