我設置使用聚合物 - JSONP從一個谷歌的電子表格獲取數據,以響應,併發送被稱爲「定位器映射」的自定義谷歌地圖聚合物元件關閉到自定義的「谷歌地圖」元素來繪製地圖上的標記。我似乎無法弄清楚如何實際注入來從聚合物JSONP元回我的谷歌地圖元素的數據,以便它可以用它來構建標記。通行證陣列和/或對象數據
我也跟着指示這裏開始此設置: http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/
代碼爲我定位地圖元素:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="google-map.html">
<polymer-element name="locator-map" attributes="">
<template>
<style>
/* styles for the custom element itself - lowest specificity */
:host { display: block; }
google-map {
display:block;
height:600px;
}
</style>
<!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets)
Format: https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script&callback=
Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&usp=sharing
-->
<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script&callback=" response="{{locations}}"></polymer-jsonp>
<ul>
<template repeat="{{location in locations.feed.entry}}">
<li>Name: {{location.gsx$name.$t}}
<ul><li>Lat: {{location.gsx$lat.$t}}</li><li>Long: {{location.gsx$lng.$t}}</li></ul>
</li>
</template>
</ul>
<!-- Load the Google Map -->
<google-map map="{{map}}" latitude="45.526158" longitude="-122.679394" zoom="14" markers="{{locations}}"></google-map>
</template>
<script>
Polymer('locator-map', {
// element is fully prepared
ready: function(){
},
// instance of the element is created
created: function() { },
// instance was inserted into the document
enteredView: function() { },
// instance was removed from the document
leftView: function() { },
// attribute added, removed or updated
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
代碼爲我的谷歌-map元件:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="google-map" attributes="latitude longitude zoom showCenterMarker map markers">
<template>
<style>
:host {
position: relative;
}
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<div id="map"></div>
</template>
<script>
(function() {
var CALLBACK_NAME = 'polymer_google_map_callback';
var MAP_URL = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false&callback=' + CALLBACK_NAME;
var pendingCallbacks = [];
var loading;
function loadMapApi(callback) {
if (window.google && window.google.maps) {
callback();
return;
}
if (!loading) {
loading = true;
window[CALLBACK_NAME] = mapApiLoaded.bind(this);
var s = document.createElement('script');
s.src = MAP_URL;
document.head.appendChild(s);
}
pendingCallbacks.push(callback);
}
function mapApiLoaded() {
delete window[CALLBACK_NAME];
pendingCallbacks.forEach(function(callback) {
callback();
});
}
Polymer('google-map', {
latitude: '37.77493',
longitude: '-122.41942',
zoom: 10,
showCenterMarker: false,
observe: {
latitude: 'updateCenter',
longitude: 'updateCenter'
},
ready: function() {
loadMapApi(this.mapReady.bind(this));
},
created: function() {
},
enteredView: function() {
this.resize();
},
mapReady: function() {
// Create the Map
this.map = new google.maps.Map(this.$.map, {
zoom: this.zoom,
center: new google.maps.LatLng(this.latitude, this.longitude)
});
// Show Center Marker
this.showCenterMarkerChanged();
// Add Markers (if any supplied)
this.addMarkers();
// Fire the Map Ready Event
this.fire('google-map-ready');
},
resize: function() {
if (this.map) {
google.maps.event.trigger(this.map, 'resize');
this.updateCenter();
}
},
updateCenter: function() {
if (!this.map) {
return;
}
this.map.setCenter(
new google.maps.LatLng(this.latitude, this.longitude));
this.showCenterMarkerChanged();
},
zoomChanged: function() {
if (this.map) {
this.map.setZoom(Number(this.zoom));
}
},
showCenterMarkerChanged: function() {
if (!this.map) {
return;
}
if (!this.centerMarker && this.showCenterMarker) {
this.centerMarker = new google.maps.Marker({
map: this.map
});
}
if (this.centerMarker) {
this.centerMarker.setPosition(this.map.getCenter());
this.centerMarker.setMap(this.showCenterMarker ? this.map : null);
}
},
/*
* Add Markers
* Adds markers to the map. Expects an array of objects specifying the location information via name, lat and lng properties.
*
* @author erikharper
*/
addMarkers: function()
{
console.log("Markers: ");
console.log(this.markers);
// Get the Map instance
var map = this.map;
if(this.markers.isArray())
{
// Create each Marker on the Map
this.markers.forEach(function(marker){
// Create a LatLng object
var markerLatLng = new google.maps.LatLng(marker.lat, marker.lng);
// Create the Marker object and add it to the map via the map property
new google.maps.Marker({
map: map,
position: markerLatLng,
title: marker.name
});
});
}
}
});
})();
</script>
</polymer-element>
在我的控制檯我得到一個「this.markers爲空」。我究竟做錯了什麼?
非常感謝埃裏克,這個工作!我現在明白如何正確處理來自jsonp元素的json響應,並且我會帶你考慮擴展現有的google-map元素以添加這個額外的標記功能。 – eriklharper