带有变量调用的谷歌地图API实现

Google Map API Implementation with variable calling

本文关键字：谷歌地图 API 实现 调用 变量      更新时间：2023-09-26

这是我下面的谷歌地图代码：

<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>

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

请参阅我解决的代码。这是多标记谷歌地图。您可以通过 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>

请参阅我解决的代码。这是多标记谷歌地图。您可以通过 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>
相关文章：