Блог

Главная - Вопросы по программированию - Как использовать компонент ссылки внутри infowindow маркера в nextjs

Как использовать компонент ссылки внутри infowindow маркера в nextjs

#reactjs #next.js #marker #infowindow #google-map-react

#reactjs #next.js #маркер #infowindow #google-карта-реагировать

Вопрос:

Привет, я внедряю карту Google в свое приложение nextjs, вот мой map.js файл компонента

 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) => `
  <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=${"/data/" location}>
          ${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" ? 12.22 : props.latitude),
    lng: (typeof(props.longitude) === "undefined" ? -90.22 : props.longitude),
    },
    zoom: 7
  }
  const latitude = (typeof(props.latitude) === "undefined" ? 12.22 : props.latitude)
  const longitude = (typeof(props.longitude) === "undefined" ?  -90.22: props.longitude)
  function handleApiLoaded(map,lat,lng){
    let infowindow = new google.maps.InfoWindow()
    let markerCenter = 0
    props.locations.map((location) => {
     let location_slug = get_location_slug(location)
      markerCenter == 0 amp;amp; 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('http://maps.google.com/mapfiles/ms/icons/red-dot.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,latitude,longitude)}
        key={props.locations,latitude,longitude}
        />
    </div>
  )
}

Как вы можете видеть, в настоящее время я использую тег в const Marker

 <a href=${"/data/" location}>
          ${props.city}
 </a>

для моего infowindow карты, который перезагружает страницу, но я хочу использовать тег ссылки, чтобы он не перезагружал его, во всем моем приложении я использую тег ссылки, чтобы он не перезагружал страницу, но только для этого информационного окна маркера я не могу этого сделать.
как я могу это сделать ?

Комментарии:

1. Почему вы не можете этого сделать? Что, если вы используете router.push ?

2. Он все еще перезагружает всю страницу

3. "/data/" location Существует ли файл на страницах?

4. да, он существует, можете ли вы один раз поделиться целым примером, как я должен это сделать

5. Вместо <a href того, чтобы использовать a <div onClick={() => router.push("/data/" location )}></div> , вы должны импортировать useRouter из next/router и вызывать const router = useRouter() в начале компонента маркера. Я не уверен, работает ли это. если это не так, вам следует создать воспроизводимый пример в codesandbox.