【问题标题】:multiple marker in google map谷歌地图中的多个标记
【发布时间】:2013-10-16 17:52:47
【问题描述】:

我在谷歌地图中放置多个标记时遇到问题。这是我的代码。它在页面重新加载期间仅显示一个标记,并且当页面完全加载时地图不显示。
javascript code:

<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize(lat,lon)
{
  var myCenter=new google.maps.LatLng(lat,lon);
  var mapProp = {
  center:myCenter,
  zoom:9,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

 var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

 var marker=new google.maps.Marker({
  position:myCenter,
 });
marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
 </script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

php code:

<?php
require_once 'geocode.php';

$addarray=array(0=>'a, ahmedabad,india',1=>'b,ahmedabad,india');
foreach($addarray as $add)
{
// define the address and set sensor to false
$opt = array (
    'address' => urlencode($add),
    'sensor'  => 'false'
);

// now simply call the function
$result = getLatLng($opt);

// if status was successful, then print the lat/lon ?
if ($result['status']) {

   echo '<pre>';
?>
 <script>
initialize(<?php echo $result['lat'];?>,<?php echo $result['lon'];?>);
 </script>  

<?php
   echo '</pre>';
}
}
?>

首先我根据地址得到了纬度和经度,然后我调用了 javascript 函数来放置标记。但是缺少某些东西或产生问题。
提前致谢。

【问题讨论】:

标签: javascript php google-maps google-maps-api-3


【解决方案1】:

感谢@Tudor Ravoiu 的帮助。它通过改变一些事情来解决。
我在 php 中创建了 json 格式的数组并将其传递给 javascript。

<?php
require_once 'geocode.php';

$addarray=array(0=>'a,ahmedabad,india',1=>'b,ahmedabad,india',2=>'c,ahmedabad,india');
$lat1=array();
foreach($addarray as $add)
{
// define the address and set sensor to false
$opt = array (
    'address' => urlencode($add),
    'sensor'  => 'false'
);

// now simply call the function
$result = getLatLng($opt);

// if status was successful, then print the lat/lon ?
if ($result['status'])
{ 
   array_push($lat1,array($result['address'],$result['lat'],$result['lon']));
}
}echo json_encode($lat1);
?>

javascript code:

<script type="text/javascript">
var locations = <?php echo json_encode($lat1);?>;
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(23.0171240, 72.5330533),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});

var infowindow = new google.maps.InfoWindow();

var marker, i;
for (i = 0; i < locations.length; i++) 
{ 
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
   });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

【讨论】:

    【解决方案2】:

    您必须将数组设置为全局变量。另请注意,如果您还想初始化信息窗口,markers_array 是一个包含所有标记纬度和经度以及其他数据的对象。

    var markers;
    var map;
    
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    
    
    
    for(i=0;i<markers_array.length;i++){
        addMarker(markers_array[i].lat,markers_array[i].long);
    }
    
    
    function addMarker(lat,lng) {
        var myLatlng = new google.maps.LatLng(lat,lng);
    
        var marker = new google.maps.Marker({
            map: map,
            position: myLatlng,
            name: zip
        });
        markers.push(marker);
     }
    

    稍后编辑:

    以下是 json 格式的标记数组示例:

    [
    {
    "name":"Marker 1 Italy",
    "lat":"46.027482",
    "long":"11.114502"
    },
    {
    "name":"Marker 2 France",
    "lat":"48.019324",
    "long":"3.555908"
    },
    {
    "name":"Marker 3 Spain",
    "lat":"40.329796",
    "long":"-4.595948"
    }
    ]
    

    【讨论】:

    • 我已经修改了答案以显示markers_array 的示例。 lats 和 lngs 我自己编了,所以用你自己的。
    猜你喜欢
    • 1970-01-01
    • 2011-12-25
    • 2010-10-11
    • 2020-02-21
    • 1970-01-01
    • 1970-01-01
    • 2013-04-08
    • 2013-05-14
    相关资源
    最近更新 更多