Google地图Polyline in React

Question

• 如何在React Component中绘制谷歌地图Polylines？
• 做任何可用的库来做到这一点？

Answer 1

退房react-google-maps我目前正试图与google-map-react解决这一点，但我认为这是麻烦一点，因为折线不直接支持。

如果你只是想拿到地图，那么谷歌地图反应可能足以为你的目的，但反应 - 谷歌地图有一个内置的折线组件，它看起来是这样的：

<Polyline 
    onClick={_.noop} 
    onRightClick={_.noop} 
    onDragStart={_.noop} 
/> 

这是相当不错的。 （：

Answer 2

下面的代码对我的作品（从我的实际使用反应，流星）

图书馆在我的项目中使用的项目采取：

• 流星单张（几乎相同的反应，传单，我相信）https://github.com/bevanhunt/meteor-leaflet
• 传单真棒标记（可选） https://github.com/lvoogdt/Leaflet.awesome-markers

[此处简要介绍：将显示一个地图，其中有几个标记，连接标记的多段线（红色）从1-> 2-> 3 - > ...-> end。标记列表代表我的餐厅列表，标记将弹出包含餐厅标题，点击将打开

constructor(props){ 
    super(props); 

    this.state = { 
     bounds: [], 
     marker_list: [], 
     spots: [], 
    } 

    // my restaurant list contains JSON data for restaurant, containing something like ... 
    // {title: 'restaurant name', location: {coordinates: ['Lng','Lat']}, /* ... */ } 
    myRestaurantList.forEach(section => { 
     this.state.bounds.push([section.location.coordinates[1],section.location.coordinates[0]]) 
     this.state.spots.push(
      { 
      title: section.title, 
      // ... 
      } 
    ) 
    }) 
    } 

    componentDidMount(){ 
    L.Icon.Default.imagePath = '/packages/bevanhunt_leaflet/images'; 
    var map = L.map('mapID').setView(this.state.bounds[0], 13); 
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
      maxZoom: 18, 
      id: 'mapbox.streets', 
      accessToken: 'YOUR-TOKEN-HERE' 
     }).addTo(map); 
    var that = this; 
    this.state.bounds.map(function(coor, index) { 
     var options = { 
     clickable: true, 
     icon: L.AwesomeMarkers.icon({icon: '', prefix: 'glyphicon',markerColor: 'green',html: '<span class="badge badge-notify" style="background-color: white; padding: 1px 0px 0px; width: 16px; height: 16px; border-radius: 8px; font-size: 11px; color: black">'+(index+1)+'</span>',}), 
     }; 
     var popup = L.popup({className: 'popupClass', autoPan: true}) 
     .setLatLng(coor) 
     .setContent('<div style="width:250px;height:auto;">'+that.state.spots[index].title+'</div>'); 
     that.state.marker_list[index] = L.marker(coor,options).bindPopup(popup); 
     that.state.marker_list[index].addTo(map); 
    }); 
    var polyline = L.polyline(this.state.bounds, {color: 'red'}).addTo(map); 
    map.fitBounds(this.state.bounds);  
    } 

    render() { 
    return (
     <div id="mapID" style={{width: '100%', height: '400px'}}></div> 
    ) 
    }