当您用google 搜索某个国家/地区的名称时，结果页面会显示一个名为“旅行指南”的部分，其中包括有关该国家/地区的旅行信息和一些目的地列表，如下图所示。

有没有办法通过Google Places API获取此类数据（例如，国家/地区名称、描述、要做的事情（作为带有标题、描述、图像的数组）、热门旅行、何时访问等...）?

我已经研究了一段时间了，但一直无法靠近。

如果不可能，是否有另一个 api 可以让我接近这些数据？

我对这个渐变色的文本感到很不舒服。

我已经经历了一些教如何将渐变应用于动态文本的教程。它有效，但 Safari 似乎无法很好地处理它。

铬渲染

Safari 渲染

两个问题：元素顶部的这一行，看起来是一个bug -webkit-background-clip: text;，但这个问题较小，因为我可以处理它。真正的问题是文字模糊，不过。

CSS

.title {
    font-weight: 700;
    font-size: 50px;
    line-height: 1em;
    text-align: right;
    color: #981d97;
    display: block;
    background-image: -webkit-linear-gradient(left ,#ffa300 0,#e31c79 50%,#981d97 100%);
    background-image: linear-gradient(to right,#ffa300 0,#e31c79 50%,#981d97 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
}

我的小提琴：https : //jsfiddle.net/d3vLd4ft/1/

编辑

• 我遵循了 mcclaskiem 关于line-height从更改为的提示1em，50px因为它可能处于半像素高度。没用
• 我注意到在调整浏览器大小时字体会稍微好一点，但是一旦停止，字体就会再次变得模糊。

我已经完成了我的 eslint 规则配置和根据我的规则重构项目文件。事情是我有一些警告，我可能想离开那里一段时间。但我的问题是浏览器控制台上显示警告，这使得开发变得不可能。

下面是我的 webpack 配置：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const context = path.resolve('.');


module.exports = {
  context: context,
  entry: './src/client.js',
  output: {
    path: path.join(context, 'build/client'),
    publicPath: '/static/',
    filename: '[name]-[hash].js'
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },
    ],
    loaders: [{
      test: /(?:node_modules).+\.css$/,
      loader: 'style!css'
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract([
        'css-loader',
        'postcss-loader',
        'sass-loader',
        'sass-resources'
      ])
    }, {
      test: /\.js$/,
      loader: 'babel',
      exclude: /(node_modules)/
    }, {
     test: …

我的React组件中存在一种情况：Link如果this.props.isComingFromModal为false，我希望将某些元素包装在组件中。

我做了什么（JSX）：

<If condition={!this.props.isComingFromModal}>
  <Link
    to={{ pathname: `vendors/${benefit.vendor.id}`, state: { modal: false } }}
  >
    <img
      className="Benefit__vendor__thumb"
      src={benefit.vendor.tinyLogoUrl}
      alt="Ponto Frio"
    />


    <div className="Benefit__vendor__info">
      <h2 className="Benefit__vendor__title">{benefit.vendor.tradingName}</h2>
      <div className="rating">
        <Rating
          readonly
          initialRate={benefit.vendor.rating}
          className="rating"
          fractions={2}
          empty="icon-rating icon-rating--empty fa fa-star fa-2x"
          full="icon-rating fa fa-star fa-2x"
        />
      </div>
    </div>
  </Link>
  <Else />
    <img
      className="Benefit__vendor__thumb"
      src={benefit.vendor.tinyLogoUrl}
      alt="Ponto Frio"
    />


    <div className="Benefit__vendor__info">
      <h2 className="Benefit__vendor__title">{benefit.vendor.tradingName}</h2>
      <div className="rating">
        <Rating
          readonly
          initialRate={benefit.vendor.rating}
          className="rating"
          fractions={2}
          empty="icon-rating icon-rating--empty fa fa-star fa-2x"
          full="icon-rating fa fa-star fa-2x"
        />
      </div>
    </div> …