Tôi đang thiết lập một bản đồ tùy chỉnh bản đồ google có tên là "locator-map" sử dụng polymer-jsonp để lấy dữ liệu từ bảng tính google, nhận phản hồi và gửi tắt thành phần tử "google-map" tùy chỉnh để vẽ các điểm đánh dấu trên bản đồ. Tôi không thể tìm ra cách để thực sự tiêm dữ liệu trở lại từ phần tử polymer-jsonp vào phần tử bản đồ google của tôi để nó có thể sử dụng nó để xây dựng các điểm đánh dấu.Vượt qua mảng và/hoặc dữ liệu đối tượng giữa các phần tử Polymer
Đây là nguồn dữ liệu của tôi: https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script
Tôi đi theo hướng đây để thiết lập này lên ban đầu: http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/
Mã cho các phần tử định vị bản đồ của tôi:
<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>
Mã cho google của tôi phần tử -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>
Trên bảng điều khiển của tôi, tôi nhận được "this.markers is null". Tôi đang làm gì sai?
Cảm ơn rất nhiều Eric, điều này làm việc! Bây giờ tôi hiểu cách xử lý đúng cách phản ứng json từ phần tử jsonp và tôi sẽ đưa bạn lên đề xuất của bạn để mở rộng phần tử bản đồ google hiện có để thêm chức năng đánh dấu bổ sung này! – eriklharper