在Kotlin JS/react项目中使用“google maps react”

我试图使用

googlemaps react

组件作为Kotlin JS项目的一部分，但遇到了一些问题，即如何使用它来映射到Kotlin。到目前为止，我有以下

谷歌地图react.kt

文件：

@file:JsModule("google-maps-react")

package org.example.kotlin.multiplatform.web


import react.*


@JsName("Map")
external val Map: RClass<RProps>


@JsName("GoogleApiWrapper")
external val GoogleApiWrapper: RClass<RProps>

@file:JsModule（“谷歌地图反应”）
包org.example.kotlin.multiplatform.web
进口反应*
@JsName（“地图”）
外部val映射：RClass
@JsName（“GoogleApiWrapper”）
外部val Googleapi包装：RClass

如果我尝试使用

Map

我会得到以下错误。有没有人尝试过这一点，或者知道有任何这样做的示例代码？我知道我至少需要设置api键（使用

GoogleApiWrapper

），但似乎更一般的问题是如何设置“google”对象（

google={this.props.google}

是我在纯javascript中看到的用法）

未捕获错误：您必须包含

google

prop

---

我有两个文件定义如下

//谷歌地图

@file:JsModule("@react-google-maps/api")

package tz.co.asoft.ui.react.maps.google

import react.Component
import react.RProps
import react.RState

external interface LatLng {
    var lat: Double
    var lng: Double
}

external class GoogleMap : Component<GoogleMap.Props, RState> {
    interface Props : RProps {
        var id: String
        var center: LatLng
        var zoom: Int
        var mapContainerStyle: dynamic
    }

    override fun render(): dynamic
}

external class Marker : Component<Marker.Props, RState> {
    interface Props : RProps {
        var position: LatLng
    }

    override fun render(): dynamic
}

external class InfoWindow : Component<InfoWindow.Props, RState> {
    interface Props : RProps {
        var position: LatLng
    }

    override fun render(): dynamic
}

external class LoadScript : Component<LoadScript.Props, RState> {
    interface Props : RProps {
        var id: String
        var googleMapsApiKey: String
    }

    override fun render(): dynamic
}

external class Polyline : Component<Polyline.Props, RState> {
    interface Props : RProps {
        var path: Array<LatLng>
        var options: Options
        var onLoad: (polyline:dynamic)->Unit
    }

    interface Options {
        var strokeColor: String
        var strokeOpacity: Double
        var strokeWeight: Int
        var fillColor: String
        var fillOpacity: Double
        var clickable: Boolean
        var draggable: Boolean
        var editable: Boolean
        var visible: Boolean
        var radius: Int
        var paths: Array<LatLng>
        var zIndex: Int
    }

    override fun render(): dynamic
}

---

希望这有帮助

即使我添加了

@file:JsModule（“@react google maps/api”）@file:JsNonModule

我从UMD访问模块声明时得到：

，它们必须由@JsModule和@JsNonModule标记

。有什么想法吗？你能给你的代码贴一个要点吗？

package tz.co.asoft.ui.react.maps.google

import kotlinext.js.js
import kotlinext.js.jsObject
import react.RBuilder
import react.RHandler

private fun RBuilder.loadScript(handler: RHandler<LoadScript.Props> = {}) = child(LoadScript::class) {
    attrs {
        id = "google-maps-script"
        googleMapsApiKey = "<your api key>"
    }
    handler()
}

private fun RBuilder.googleMap(handler: RHandler<GoogleMap.Props> = {}) = child(GoogleMap::class) {
    attrs {
        center = jsObject { lat = 0.0; lng = 0.0 }
        zoom = 13
        mapContainerStyle = js {
            height = "90%"
            width = "100%"
        }
    }
    handler()
}

fun RBuilder.polyLine(paths: Array<LatLng>, handler: RHandler<Polyline.Props> = {}) = child(Polyline::class) {
    attrs {
        options = jsObject {
            strokeColor = "#FF0000"
            strokeOpacity = 0.8
            strokeWeight = 2
            fillColor = "#FF0000"
            fillOpacity = 0.35
            clickable = false
            draggable = false
            editable = false
            visible = true
            radius = 30000
            zIndex = 1
        }
        options.paths = paths
    }
    attrs.path = paths
    handler()
}

fun RBuilder.marker(handler: RHandler<Marker.Props> = {}) = child(Marker::class) {
    attrs { position = jsObject { lat = 0.0; lng = 0.0 } }
    handler()
}

fun RBuilder.infoWindow(handler: RHandler<InfoWindow.Props> = {}) = child(InfoWindow::class) {
    attrs { position = jsObject { lat = 0.0; lng = 0.0 } }
    handler()
}

fun RBuilder.map(handler: RHandler<GoogleMap.Props> = {}) = loadScript {
    googleMap {
        handler()
    }
}

fun Array<Double>.toLatLng() = jsObject<LatLng> {
    lat = get(0)
    lng = get(1)
}

div{
    map {
        marker {
            attrs { position = jsObject { lat = 0.0; lng = 0.0 } }
        }
    }
}