我正在尝试获取经度和纬度标记并在地图上显示它们,但我没有得到任何结果,我的解析器.php文件正在工作并从数据库中获取数据我只需要将其格式化为 JavaScript
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -25.363882, lng: 131.044922},
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
$.getJSON('parser.php', function(items) {
for (var i = 0; i < items.length; i++) {
(function(item) {
addMarker(item.lat, item.lon);
})(items[i]);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
解析器.php输出
[{"0":"33.880561","lat":"33.880561","1":"35.542831","lon":"35.542831"},{"0":"-25.363882","lat":"25.363882","1":"131.044922","lon":"131.044922"}]
你的问题是你的PHP中的纬度值和lon值是字符串。 我假设(因为您的问题在此阶段不包括它)您的addMarker
函数没有将这些字符串转换为谷歌地图期望的纬度/液化值的数字对象。
在将它们传递给地图 API 之前,尝试简单地将它们包装在 parseFloat()
中,例如
addMarker(parseFloat(item.lat), parseFloat(item.lon));
或者,您可以在 addMarker 函数本身中执行此操作(这可能更好)。
您需要将标记添加到地图中。按照代码当前结构化的方式,映射是初始化函数的本地映射,无法将该值传递给 addMarker 函数。
您有两种选择:
- 将 "map" 变量传递给 addMarker 函数
function initialize() {
var mapOptions = {
center: {
lat: -25.363882,
lng: 131.044922
},
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
$.getJSON('parser.php', function (items) {
for (var i = 0; i < items.length; i++) {
(function (item) {
addMarker(item.lat, item.lon, map);
})(items[i]);
}
});
}
概念验证小提琴
工作代码片段:
function initialize() {
var mapOptions = {
center: {
lat: -25.363882,
lng: 131.044922
},
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// $.getJSON('parser.php', function (items) {
var items = [{
"0": "33.880561",
"lat": "33.880561",
"1": "35.542831",
"lon": "35.542831"
}, {
"0": "-25.363882",
"lat": "25.363882",
"1": "131.044922",
"lon": "131.044922"
}];
for (var i = 0; i < items.length; i++) {
(function(item) {
addMarker(item.lat, item.lon, map);
})(items[i]);
}
// });
}
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, map) {
var latlng = new google.maps.LatLng(lat, lng);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
map.fitBounds(bounds);
return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
- 使"map"变量全局化。
var map; // global variable, outside of any function definition
function initialize() {
var mapOptions = {
center: {
lat: -25.363882,
lng: 131.044922
},
zoom: 14
};
// initialize the global variable (no "var")
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
$.getJSON('parser.php', function (items) {
for (var i = 0; i < items.length; i++) {
(function (item) {
addMarker(item.lat, item.lon);
})(items[i]);
}
});
}
工作代码片段:
var map;
function initialize() {
var mapOptions = {
center: {
lat: -25.363882,
lng: 131.044922
},
zoom: 14
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// $.getJSON('parser.php', function (items) {
var items = [{
"0": "33.880561",
"lat": "33.880561",
"1": "35.542831",
"lon": "35.542831"
}, {
"0": "-25.363882",
"lat": "25.363882",
"1": "131.044922",
"lon": "131.044922"
}];
for (var i = 0; i < items.length; i++) {
(function(item) {
addMarker(item.lat, item.lon);
})(items[i]);
}
// });
}
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
map.fitBounds(bounds);
return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>