编辑2

Question

我正在尝试在地图上标记几个位置，我通过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的新手。

Answer 1

您应该删除以下行：

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);
}

您总是使用新选项和新中心定义新地图。试试这个，看它是否有效。 vars myLat和myLong应该是您希望地图在开始时居中的纬度和经度。

编辑2

检查您在评论中发布的日志，我现在看到您从谷歌加载的网址错误，您错过了apiKey和secretKey，请查看以下链接以解决此问题：

https://developers.google.com/maps/documentation/javascript/tutorial#api_key

尽管如此，在我的第一次编辑中进行修改时，您必须应用它们才能使其正常工作。

在Google地图中标记多个位置

1 个答案:

编辑2