[英]Google Maps Ajax multiple markers Json
我有以下內容: https : //jsfiddle.net/inkedraskal/h35dz9qd/5/
我收到錯誤消息:無法分配只讀屬性'__e3_'為0
我以前有一個for循環,在for循環之后調用了該函數,但是jshint不接受它。 因此,現在我正在使用Ajax,但遇到困難。 我可以返回控制台中的對象以及第一個信息框的內容(請參閱控制台),然后出現錯誤。
js如下所示:(任何技巧,竅門等都將不勝感激)
(function () {
renderGoogleMap();
function renderGoogleMap() {
var start_point = new google.maps.LatLng(0, 0);
// Creating a new map
var map = new google.maps.Map(document.getElementById("locations-map"), {
center: start_point,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Creating a global infoWindow object that will be reused by all markers
var infoWindow = new google.maps.InfoWindow();
function setMarkerPoints(map,marker) {
var bounds = new google.maps.LatLngBounds();
// Looping through the JSON data
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
$.ajax({
type: "GET",
url: 'https://raw.githubusercontent.com/roryheaney/jsonexample/master/locatoins.json',
dataType: "json",
success: function (data) {
console.log(data);
if (data.length !== 0) {
var latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
$.each(data, function (marker, data) {
var windowContent = '<h3>' + data.title + '</h3>' +
'<p>' + data.description + '</p>';
console.log(windowContent);
// Attaching a click event to the current marker
infobox = new InfoBox({
content: infoWindow.setContent(windowContent),
alignBottom: true,
pixelOffset: new google.maps.Size(-160, -45)
});
google.maps.event.addListener(marker, 'click', function () {
// Open this map's infobox
infobox.open(map, marker);
infobox.setContent(windowContent);
map.panTo(marker.getPosition());
infobox.show();
});
google.maps.event.addListener(map, 'click', function () {
infobox.setMap(null);
});
});
}
},
error: function (data) {
// alert('Please refresh the page and try again');
console.log('Please refresh the page and try again');
}
});
//END MARKER DATA
// bounds.extend(marker.getPosition());
// end loop through json
map.setCenter(start_point);
map.fitBounds(bounds);
}
setMarkerPoints(map);
}
})();
更改列表:
1.Google Maps API包含它自己的事件,該事件會在頁面加載后觸發,因此我替換了以下幾行:
(function () {
renderGoogleMap();
//...
})();
同
function renderGoogleMap() {
//...
}
google.maps.event.addDomListener(window, 'load', renderGoogleMap);
2.增加了標記緯度/經度邊界的初始化。
3.一些其他小的修復。
代碼段:
function renderGoogleMap() { var start_point = new google.maps.LatLng(0, 0); // Creating a new map var map = new google.maps.Map(document.getElementById("locations-map"), { center: start_point, zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }); // Creating a global infoWindow object that will be reused by all markers var infoWindow = new google.maps.InfoWindow(); function setMarkerPoints(map, marker) { var bounds = new google.maps.LatLngBounds(); $.ajax({ type: "GET", url: 'https://raw.githubusercontent.com/roryheaney/jsonexample/master/locatoins.json', dataType: "json", success: function(data) { if (data.length !== 0) { $.each(data, function(marker, data) { var latLng = new google.maps.LatLng(data.lat, data.lng); bounds.extend(latLng); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: data.title }); var windowContent = '<h3>' + data.title + '</h3>' + '<p>' + data.description + '</p>'; // Attaching a click event to the current marker infobox = new InfoBox({ content: infoWindow.setContent(windowContent), alignBottom: true, pixelOffset: new google.maps.Size(-160, -45) }); google.maps.event.addListener(marker, 'click', function() { // Open this map's infobox infobox.open(map, marker); infobox.setContent(windowContent); map.panTo(marker.getPosition()); infobox.show(); }); google.maps.event.addListener(map, 'click', function() { infobox.setMap(null); }); }); map.fitBounds(bounds); } }, error: function(data) { console.log('Please refresh the page and try again'); } }); //END MARKER DATA // end loop through json } setMarkerPoints(map); } google.maps.event.addDomListener(window, 'load', renderGoogleMap); // renderGoogleMap();
#locations-map { display: block; height: 500px; } .infoBox { max-width: 300px; background: #fff; padding: 10px; border: 1px solid red; } .infoBox img { border: 1px solid yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> <div id="locations-map"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.