Question

好吧，我在网上找到了它：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Maps con Polymer</title>

<link rel="stylesheet" href="css/google-map.css">

<script src="components/platform/platform.js"></script>
<!-- 2.- La sentención (link rel="import") nos permite importar Web Components personalizdos
        en este caso estamos importando el de google-map -->
<link rel="import" href="components/google-map/google-map.html">

</head>
<body>

<google-map lat="37.790" long="122.390"></google-map>


</body>
</html>

它向我展示了旧金山，EEUU。但是当我改变params（lat和long）时：

<google-map lat="-30.761" long="-57.990"></google-map>

它显示了我相同的地图。

我更改了文件中google组件中的相同参数：“google-map.html”

这是一段代码：

<script>

Polymer('google-map', {

/**
 * A Maps API key. To obtain an API key, see  developers.google.com/maps/documentation/javascript/tutorial#api_key.
 *
 * @property apiKey
 * @type string
 */
apiKey: null,

/**
 * A latitude to center the map on.
 *
 * @attribute latitude
 * @type number
 * @default 37.77493
 */
latitude: -30.761111,

/**
 * A longitude to center the map on.
 *
 * @attribute longitude
 * @type number
 * @default -122.41942
 */
longitude: -57.990111,

它对我有用。

所以我需要解决这种情况：获取我想要的地图，但只能使用我在应用程序主索引中调用的参数。并且不得触摸或重写组件代码。

Answer 1

尝试Google Maps Tutorials page

中的以下代码

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng(-30.761, -57.990),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

此外，您可以设置缩放（缩放：3-21）并禁用滚轮（滚轮：true / false）

Answer 2

属性名称应为latitude和longitude

<google-map latitude="-30.761" longitude="-57.990"></google-map>

如何在聚合物谷歌地图组件中更改纬度和长度参数

2 个答案: