我有一个带有多个标记的谷歌地图，每个标记都有一个信息框，与这个jsfiddle示例相同：http://jsfiddle.net/ccj9p/7/
示例的第73行周围：
//here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable
markers = initMarkers(map, [
{ latLng: new google.maps.LatLng(49.47216, -123.76307), address: "Address 1", state: "State 1" },
{ latLng: new google.maps.LatLng(49.47420, -123.75703), address: "Address 2", state: "State 2" },
{ latLng: new google.maps.LatLng(49.47530, -123.78040), address: "Address 3", state: "State 3" }
]);
创建标记阵列。这可以正常工作，但我需要通过调用PHP脚本来动态创建标记数组。有人能说出这是否可能吗？如果可能，你能建议如何构建和响应PHP吗？
我知道这可能很愚蠢，但以下是我已经尝试过的：
PHP：目前，只需回声
{ latLng: new google.maps.LatLng(52.931429, -1.448307), title: "Test Business", subtitle: "Design", website: "mywebsite.com" }
JS:
$.get("/listings/businesses", function(data) {
var loaded_businesses = data;
var businesses = new Array(loaded_businesses);
//here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable
markers = initMarkers(map, businesses);
});
我没有得到js错误，只是地图上没有出现标记。
我真的非常感谢任何关于我应该如何处理这件事的建议！
我已经解决了这个问题，下面是完整的代码，以防对其他人有所帮助。
记住，我使用infobox.js在标记上创建信息框：
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js
JS:
if($('#map_canvas').length > 0)
{
var cityCentre = new google.maps.LatLng(52.922298, -1.477275),
markers,
myMapOptions = {
scrollwheel: false,
mapTypeControl: false,
zoom: 12,
center: cityCentre,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
function initMarkers(map, markerData) {
var newMarkers = [],
marker;
for(var i=0; i<markerData.length; i++) {
marker = new google.maps.Marker({
map: map,
draggable: false,
position: markerData[i].latLng,
visible: true,
icon: 'assets/images/pin.png'
}),
boxText = document.createElement("div"),
//these are the options for all infoboxes
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "none",
opacity: 1,
width: "320px"
},
closeBoxMargin: "12px 10px 2px 2px",
closeBoxURL: "/assets/images/map-infobox-close-placeholder.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
newMarkers.push(marker);
//define the text and style for all infoboxes
//boxText.style.cssText = "margin-top: 8px; background:#fff; color:#3a3c17; font-family:'Montserrat', sans-serif; font-size:1.4em; padding: 14px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;";
boxText.style.cssText = "color:#3a3c17;";
boxText.innerHTML = "<div class='info-inner'><p class='title'>" + markerData[i].title + "</p><p class='subtitle'>" + markerData[i].subtitle + "</p>" + markerData[i].website + "</div>";
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
//newMarkers[i].infobox.open(map, marker); // hide markers on page load
//Add event listen, so infobox for marker is opened when user clicks on it. Notice the return inside the anonymous function - this creates
//a closure, thereby saving the state of the loop variable i for the new marker. If we did not return the value from the inner function,
//the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that
//serves the same purpose) is often needed when setting function callbacks inside a for-loop.
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//newMarkers[i].infobox.close();
newMarkers[i].infobox.open(map, this);
map.panTo(markerData[i].latLng);
}
})(marker, i));
}
return newMarkers;
}
var businesses = new Array();
$.getJSON("/listings/businesses", function(json1) {
$.each(json1, function(key, data) {
var markerObject = {};
markerObject.latLng = new google.maps.LatLng(data.lat, data.lng);
markerObject.title = data.title;
markerObject.subtitle = data.title;
markerObject.website = data.website;
businesses.push(markerObject);
});
markers = initMarkers(map, businesses);
});
}
我的PHP脚本只是回显了这个JSON:
[{"title":"Marker 1","lat":"52.931429","lng":"-1.448307","address":"My Address from PHP","website":"www.flemming.co.uk"},{"title":"Marker 2","lat":"52.933706","lng":"-1.479549","address":"My Address 2 from PHP","website":"www.flemming2.co.uk"}]
毫无疑问，JavaScript可以改进，请随时提出改进建议！解决我问题的实际代码是：
$.getJSON("/listings/businesses", function(json1) {
$.each(json1, function(key, data) {
var markerObject = {};
markerObject.latLng = new google.maps.LatLng(data.lat, data.lng);
markerObject.title = data.title;
markerObject.subtitle = data.title;
markerObject.website = data.website;
businesses.push(markerObject);
});
markers = initMarkers(map, businesses);
});
我只需要创建一个对象数组，然后将其传递给initMarkers（）