我试图在 map 上标记几个位置，这些位置是我通过 php 代码从数据库中获取的:
PHP 代码:
<?php error_reporting(0);
$con = mysql_connect('localhost','root','');
$db = mysql_select_db('easydoes');
$query = mysql_query('SELECT city,latitude,longitude FROM zip_codes LIMIT 0 , 30');
while($row = mysql_fetch_assoc($query))
{
$val[]=$row;
}
echo json_encode($val);
?>
HTML 代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var obj;
$(document).ready(function(){
$.post("markers.php",{},function(data){
obj=JSON.parse(data);
//alert(obj[0].city);
initialize(obj);
});
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js">
</script>
<script>
function initialize() {
var markers = [];
for(var i=0;i<obj.length;i++)
{
var myLatlng = new google.maps.LatLng( obj[i].latitude, obj[i].longitude);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: obj[i].city
});
markers.push(marker);
}
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 12,
gridSize: 40,
styles: "Default"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
我哪里错了？我对 Jquery 和 Java Script 还很陌生。
最佳答案
您应该删除以下行:
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
并将其放在for循环之外。
如果这不起作用，请粘贴控制台日志以查看失败的原因。
编辑:试试这个:
var myLat = 'lat.to.center.your.map';
var myLong = 'long.to.center.your.map';
var myLatlng= new google.maps.LatLng( myLat, myLong);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for(var i=0;i<obj.length;i++)
{
var poiLatLang = new google.maps.LatLng( obj[i].latitude, obj[i].longitude);
var marker = new google.maps.Marker({
position: poiLatLang ,
map: map,
title: obj[i].city
});
markers.push(marker);
}
您总是在定义新 map 、新选项和新中心。试试看它是否有效。变量 myLat 和 myLong 应该是您希望 map 在开始时居中的纬度和经度。
编辑 2
查看您在评论中发布的日志，我现在看到您从谷歌加载的 url 是错误的，您缺少 apiKey 和 secretKey，请查看以下链接以解决此问题:
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
尽管如此，您必须应用我第一次编辑中的修改才能使其正常工作。
关于javascript - 在 Google map 中标记多个位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20335578/