标记不显示在谷歌地图上,但在控制台没有错误
Markers not displaying on google map, but no errors in console
已经把我的头发拔出来了一段时间:试图使用json从我的数据库中获取后期/液化天然气值,然后使用这些值将标记输出到谷歌地图上。目前地图显示没有标记,控制台也没有错误。任何帮助将非常感激!
<script type="text/javascript">
var map = null;
function addMarker(lat,lng) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
});
}
function initialize() {
var mapOptions = {
center: {lat: 54.872128, lng: - 6.284874},
zoom: 13
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
$(document).ready(function(){
$.getJSON('MarkersController.php', function(data){
var locations = JSON.parse(data);
for(var i =0; i<locations.length; i++){
addMarker(locations['lat'], locations['lng']);
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
从mysql中检索的php脚本:
<?php
include('DB_INFO.php');
// Opens a connection to a MySQL server.
$connection = mysqli_connect($server, $username, $password);
if (!$connection) {
die('Not connected : ' . mysqli_error());
}
// Sets the active MySQL database.
$db_selected = mysqli_select_db($database, $connection);
if (!$db_selected) {
die('Can''t use db : ' . mysqli_error());
}
// Selects all the rows in the markers table.
$query = 'SELECT * FROM tester';
$result = mysqli_query($query);
if (!$result) {
die('Invalid query: '. mysqli_error());
}
$list = array();
while ($row = mysqli_fetch_assoc($result)) {
$list[] = $row;
}
header('Content-Type: application/json');
echo json_encode($list);
?>
如果你有一个标记集合,我认为你应该使用这种方式迭代集合并分配i元素:
for(var i =0; i<locations.length; i++){
addMarker(locations[i].lat, locations[i].lng);
}
概念验证
你可以试一试,改成如下。
while ($row = mysqli_fetch_assoc($result)) {
//Assuming "lat" is column name in tester table. Please change it if required.
$lat= $rows['lat'];
//Assuming "lng" is column name in tester table. Please change it if required.
$lng= $rows['lng'];
$list[] = array('lat' => $lat, 'lng' => $lng);
}
我使用原型制作,代码更加清晰。一个例子(假设你正在使用jquery):
创建3个脚本:
- <
- 地图脚本/gh><
- JSONParser脚本/gh>
- 主脚本
首先为google maps创建原型函数:
var MapUtil = (function($) {
var mapProp = {
center: new google.maps.LatLng(-38.4529181, -63.5989206),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/**
* @returns
* Maps options for create a google map
*/
function getMapProperties() {
return mapProp;
}
/**
* Create simple marker
* @param lat
* Latitude for the marker
* @param lng
* Longitude for the marker
* @param myMap
* Actual map
* @returns
* Return a new google map marker
*/
function simpleMarker(lat, lng, myMap) {
var marker = new google.maps.Marker({
//add the marker options
position: new google.maps.LatLng(lat, lng),
draggable:true,
animation: google.maps.Animation.DROP,
map: myMap,
});
return marker;
}
return {
getMapProperties: getMapProperties,
simpleMarker: simpleMarker,
};
})(jQuery);
然后创建JSONParser将JSON转换为javascript对象:
var JSONParser = (function($){
/**
* @return An array with the markers parsed
*/
function getMarkers(json) {
var markers = [];
for (int i = 0; i < json.length; i++) {
markers.push({json[i].lat,json[i].lng});
}
return markers;
}
return {
getMarkers : getMarkers,
};
})(jQuery);
和你的主脚本:
$(document).ready(function() {
var myMap = null;
//add the map to the page
google.maps.event.addDomListener(window, 'load', initialize);
/**
* Init Google Maps
*/
function initialize() {
var map=new google.maps.Map(document.getElementById("googleMap"),
MapUtil.getMapProperties());
myMap = map;
createMarkers();
}
function createMarkers() {
//retrieve the information
$.ajax({
type: 'post',
url: 'MarkersController.php',
data: {},
success: function (data) {
var json= $.parseJSON(data);
var markers = JSONParser.getMarkers(json);
for (var i = 0; i < markers.length; i++) {
MapUtil.simpleMarker(marker[i].lat, marker[i].lng, myMap);
}
}
});
}
});
然后按以下顺序将脚本添加到html中:
<script src="...path.../map-utils.js"></script>
<script src="...path.../json-pareser.js"></script>
<script src="...path.../main.js"></script>
关于map或json的其他功能添加额外的方法!
你想用这样的东西:
google.maps.event.addListenerOnce(map, 'idle', function(){
// Code Here..but jquery might load first or last.. see below.
});
如果我没弄错的话,你的DOM在你的地图之前准备好了。我通常创建一个函数被调用两次,第二次调用它加载JS…所以第一个调用通常是jQuery,第二个是maps ready..然后运行任何与map相关的代码。
我如何做的例子…用最基本的术语来说……
var iLoadPoints = 0;
function mapReady() {
if (iLoadPoints==2) { // Map & jQuery Ready To Use
// RUN CODE HERE... At this point, run the getJSON and so on...
} else { // Loader Not Ready... Escape function and ignore until next call
return false;
}
}
$(function() {
iLoadPoints += 1;
mapReady();
});
google.maps.event.addListenerOnce(map, 'idle', function(){
iLoadPoints += 1;
mapReady();
});
我假设如果你回声的晚/长,以安慰你得到他们…如数据正确存在
EDIT:正如刚才所建议和注意到的,循环确实需要使用i变量来选择循环中的当前项,如scaisEdge所示/
for(var i =0; i<locations.length; i++){
addMarker(locations[i].lat, locations[i].lng);
}
修改自你的评论:我相信更多的是这样的…
var iLoadPoints =0;
function mapReady(){
if(iLoadPoints === 2){
initialize();
}else {
return false;
}
}
google.maps.event.addListenerOnce(map, 'idle', function(){
iLoadPoints+=1;
mapReady();
});
google.maps.event.addDomListener(window, 'load', function(){
iLoadPoints+=1;
mapReady();
});
你也可以把mapReady缩短为…
function mapReady(){
if(iLoadPoints === 2) initialize();
}
整个想法是mapReady是一个简单的捕获…可以将if语句添加到初始化函数中。同样的效果,整个概念是你需要等待两个不同时间的Ready事件,它可以用两个布尔值或其他方法来完成。
在过去的测试中,如果我从我的本地主机加载一个网站,并有像谷歌地图..本地的jQuery将是即时的,而gmap将永远落后。因此,有时我会遇到加载已经配置的/数据驱动的地图失败。
或进一步…
var iLoadPoints =0;
google.maps.event.addListenerOnce(map, 'idle', function(){
iLoadPoints+=1;
if (iLoadPoints===2) initialize();
});
google.maps.event.addDomListener(window, 'load', function(){
iLoadPoints+=1;
if (iLoadPoints===2) initialize();
});
- 回复'js'仅当请求有错误时(否则使用html)
- 表单已发送,但验证有错误
- 如果文件不存在,fs.watch是否有错误处理程序
- Meteor上有错误的同步问题
- 我的镀铬扩展程序没有't向控制台显示错误,但它显示日志
- 表单验证:如果有错误,不要't使手风琴动起来
- 想要从控制台隐藏错误$(..).focusOut不是函数
- 控制台:引用错误:未定义停止传播
- 如何从节点-网络工作者-线程向控制台发送错误
- 我有错误文档.注册元素未被细化
- 如何转换为特定于 json 的类 c#?我有错误
- 如果当前输入有错误或警告,则禁用所有下一个表单输入字段
- 通过有错误的 Ajax-Request 打印出 HTML 会阻止进一步的 JS 工作
- 脸书应用程序有错误
- 所有错误都显示在 Chrome 控制台 JavaScript 错误中
- XDomainRequest 总是有错误
- HTML5 Canvas游戏有错误,点击时第一个拼图块会变成不同的块
- MediaWiki中的MathJax:显示转义语法,控制台有404个错误
- 当尝试用另一个facebook用户登录时,它说控制台日志中有错误
- 在Javascript中,我想添加一个值到数组,但在控制台我有错误"失踪;statement"之前