1
我正在開發一個jQuery移動地圖應用，我有map.html，map.js和map.json文件下面如何從JSON文件加載多個標記？
function initialize() {
var latitude = 57.95,
longitude = 14.65,
radius = 8000, //how is this set up
center = new google.maps.LatLng(latitude,longitude),
bounds = new google.maps.Circle({center: center, radius: radius}).getBounds(),
mapOptions = {
center: center,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
setMarkers(center, radius, map);
}
function setMarkers(center, radius, map) {
var json = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "./map.json",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
var circle = new google.maps.Circle({
strokeColor: '#000000',
strokeOpacity: 0.25,
strokeWeight: 1.0,
fillColor: '#ffffff',
fillOpacity: 0.1,
clickable: false,
map: map,
center: center,
radius: radius
});
var bounds = circle.getBounds();
//loop between each of the json elements
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
if(bounds.contains(latLng)) {
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.content
});
infoBox(map, marker, data);
}
}
circle.bindTo('center', marker, 'position');
}
function infoBox(map, marker, data) {
var infoWindow = new google.maps.InfoWindow();
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.content);
infoWindow.open(map, marker);
});
// Creating a closure to retain the correct data
// Note how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.content);
infoWindow.open(map, marker);
});
})(marker, data);
}
google.maps.event.addDomListener(window, 'load', initialize);[{
"lat": 57.95,
"lng": 14.65,
"content":"test content1"
},
{
"lat": 57.9,
"lng": 14.6,
"content":"test content2"
},
{
"lat": 57.85,
"lng": 14.55,
"content":"test content3"
}]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
</script>
<script src="./map.js"></script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>給出，但在我的代碼標記都不見....當我試圖運行一個單一的HTML文件沒有任何外部.js和.json文件它的工作，但與此代碼，我無法運行..
我需要知道哪裏會出錯，也neeed help： 1.在地圖上顯示多個標記 2.點擊它應該顯示在內容標籤
等待救援消息的標誌...在此先感謝...
您的瀏覽器控制檯是否顯示任何錯誤？ – Mayhem
這是我得到的錯誤 – Rachna
XMLHttpRequest無法加載file：/// C：/Users/Desktop/map/map.json。協議方案只支持交叉原點請求：http，data，chrome，chrome-extension，https，chrome-extension-resource.b.ajaxTransport.send @ jquery-1.9.1.min.js：5b.extend.ajax @ jquery-1.9.1.min.js：5（匿名函數）@ map.js：22setMarkers @ map.js：32initialize @ map.js：16 map.js：48 Uncaught TypeError：無法讀取nullsetMarkers的屬性'length' @ map.js：48initialize @map.js：16 – Rachna