Question

我的谷歌地图上有标记，可以点击每个标记并显示有关标记的一些信息。该信息是一种字符串html格式，其中包含一些链接。我想在点击链接时调用react函数。我怎样才能做到这一点？现在函数 _onClick（p）很快就会在渲染时被调用，我已经修改了函数的调用方法但是它没有工作。

_onClick(p){
    alert('HELLO ' + p.id)
},

_renderPoints(positions){
    const markers = []
    let center
    positions.forEach((p) => {
        if (p.latLng){
            const point = new google.maps.LatLng(p.latLng.lat,p.latLng.lng)
            const marker_title = p.code
            const marker_content = `<b>${p.customerName}</b><br/>
                                    <a href="#" onClick=${this._onClick(p)}>Click</a><br/>
                                    <a href="#" style="color:mediumblue" onClick="window.open('${p.customerPhoto}','Foto Rumah ','resizable,height=260,width=370');return false;">${p.customerAddress}</a><br/>
                                    <div style="margin-top:5px">
                                        stand kini: <a href="#" onClick="window.open('${p.currentStandPhoto}','Foto Meter Bulan Ini ','resizable,height=300,width=300');return false;">${p.currentStand}</a><br/>
                                        stand lalu: <a href="#" onClick="window.open('${p.previousStandPhoto}','Foto Meter Bulan Lalu ','resizable,height=300,width=300');return false;">${p.previousStand}</a>
                                    </div>`
            const marker = new google.maps.Marker({
                    position: point,
                    map: this.state.map,
                    title: marker_title
                })

            const infowindow = new google.maps.InfoWindow({
                content: marker_content
            });

            marker.addListener('click',function () {
                infowindow.open(this.map, marker);
            })
            markers.push(marker)
            center = point
        }
    })
    this.setState({
        markers
    })
    if (center){
        this.state.map.setCenter(center)
    }
},

Answer 1

这是因为代码中锚标记的onClick函数被视为字符串，相反，您应该创建on组件，尝试代码beloow，并更改此代码const marker_content = ....转换为const marker_content = <InfoWindow data={p}/>

＆＃13;

const InfoWindow = React.createClass({
	_onClick(p){
		console.log(p)
	},
	render: function() {
		var p = this.props.data
		return (<div>
		  <b>${p.customerName}</b><br/>
      <a href="#" onClick=${() => {this._onClick()}}>Click</a><br/>
      <a href="#" style="color:mediumblue" onClick="window.open('${p.customerPhoto}','Foto Rumah ','resizable,height=260,width=370');return false;">${p.customerAddress}</a><br/>
      <div style="margin-top:5px">
           stand kini: <a href="#" onClick="window.open('${p.currentStandPhoto}','Foto Meter Bulan Ini ','resizable,height=300,width=300');return false;">${p.currentStand}</a><br/>
           stand lalu: <a href="#" onClick="window.open('${p.previousStandPhoto}','Foto Meter Bulan Lalu ','resizable,height=300,width=300');return false;">${p.previousStand}</a>
      </div>
		</div>)
	}
})

＆＃13;

＆＃13; 让我知道这是否有效，希望它有用

使用React处理Google Maps InfoWindow内容

1 个答案: