谷歌地图Ajax多个标记Json
Google Maps Ajax multiple markers Json
我有一个如下:https://jsfiddle.net/inkedraskal/h35dz9qd/5/
我得到一个错误:不能分配给只读属性'__e3_'的0
我之前有一个for循环,它在for循环之后调用函数,但是jshint不接受它。现在我在使用Ajax,但我卡住了。我可以返回控制台中的对象以及第一个信息框的内容(参见console),然后我得到一个错误。
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。添加了初始化标记lat/lng边界。
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>
相关文章:
- json-ajax动画防止通过php发送数据
- JSON/AJAX and Facebook
- 对JSON AJAX响应进行迭代
- 从Json Ajax响应中剥离标记
- Python Flask Web服务器未接收到JSON ajax POST请求,服务器返回HTTP 200 OPTION
- 使用jquery-json-ajax.php删除整行
- F5负载平衡器附加<脚本>到JSON Ajax响应
- 从 Java 服务器加载 JSON ajax 后无法获取 h1 标记的内部 HTML
- 使用 json ajax javascript jquery 和 java 的自动完成搜索栏(无 PHP)
- JSON Ajax 数据问题
- 是否可以将javascript json ajax POST的多个参数传递给Spring MVC控制器
- Json ajax DatePicker - 不可用的日期
- JSON ajax发布数据-获取400个错误的请求消息
- 从JSON Ajax返回中提取值
- 未捕获的SyntaxError:意外的JSON ajax请求数
- 使用JQuery淡出JSON ajax列表
- JSON ajax使用Freebase API不断抛出未定义的
- jQuery JSON AJAX请求到不同的域
- JSON Ajax调用错误
- PHP循环JSON ajax成功