使用变量调用的Google Map API实现

时间:2012-04-12 07:02:39

标签: javascript api google-maps

这是我的Google地图代码:

<div id="map_canvas" style="width: 500px; height: 400px;"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
InitMap("[['Leslie Fleming',41.977, -71.3248, 1 ],['Chris Reale',41.977, -71.3248, 2 ],['Michael Anello',41.977, -71.3248, 3 ],['Ed Pariseau Jr',41.977, -71.3248, 4 ],['Ryan Higgens',41.977, -71.3248, 5 ]]", "41.977, -71.3248");
function InitMap(MapElement, MapPointer){
    var locations = MapElement;
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 10,
      center: new google.maps.LatLng(MapPointer),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

为什么它不起作用?我做错了吗?

2 个答案:

答案 0 :(得分:0)

查看我已解决的代码。这是Google地图的多重标记。您可以通过AJAX使用它。我不需要聘请程序员。我能够解决它。

 <div id="map_canvas" style="width: 500px; height: 400px;"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
InitMap([["Leslie Fleming",41.977, -71.3248, 1 ],["Chris Reale",41.977, -71.3248, 2 ],["Michael Anello",41.977, -71.3248, 3 ],["Ed Pariseau Jr",41.977, -71.3248, 4 ],["Ryan Higgens",41.977, -71.3248, 5 ]], 41.977, -71.3248);
function InitMap(MapElement, latitude, longitude){
    var locations = MapElement;
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 10,
      center: new google.maps.LatLng(latitude, longitude),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

答案 1 :(得分:-3)

查看我已解决的代码。这是Google地图的多重标记。您可以通过AJAX使用它。我不需要聘请程序员。我能够解决它。

    <div id="map_canvas" style="width: 500px; height: 400px;"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
InitMap([["Leslie Fleming",41.977, -71.3248, 1 ],["Chris Reale",41.977, -71.3248, 2 ],["Michael Anello",41.977, -71.3248, 3 ],["Ed Pariseau Jr",41.977, -71.3248, 4 ],["Ryan Higgens",41.977, -71.3248, 5 ]], 41.977, -71.3248);
function InitMap(MapElement, latitude, longitude){
    var locations = MapElement;
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 10,
      center: new google.maps.LatLng(latitude, longitude),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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