关于Google Maps JavaScript API V3的使用记录

因为用Google Maps JavaScript API V2 需要密钥，是一件非常头大的事情，网站发布后出现如下的问题：

所以果断弃用以前的方法和老版本，使用新版本。

代码如下：

<head>中添加：

 <!--google map-->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
        var la = new Array();
        var ln = new Array();
        var num =new Array();
        
        <%for(int i=0;i<1;i++){ %>
        num.push(<%=num[0] %>);
        <%} %>

        <%for(int i=0;i<num[0];i++){ %>
        la.push(<%=la[i] %>);
        ln.push(<%=ln[i] %>);
        <%} %>


    var map; var infowindow;
    function InitializeMap() {
        var latlng = new google.maps.LatLng(la[0], ln[0]);
        var myOptions =
        {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    }


    function markicons() {

        InitializeMap();

        var ltlng = [];
        for(var i = 0; i < num[0];i++)
        {
          ltlng.push(new google.maps.LatLng(la[i], ln[i]));
        }

        map.setCenter(ltlng[0]);
        for (var i = 0; i <= ltlng.length; i++) {
            marker = new google.maps.Marker({
                map: map,
                position: ltlng[i]
            });
            var j = i + 1;
            marker.setTitle(j.toString());
            attachSecretMessage(marker,i);
        }
    }
    // The five markers show a secret message when clicked
    // but that message is not within the marker's instance data

  function attachSecretMessage(marker, number) {
  //var message = ["This","is","the","secret","message"];
  var message = new Array();
        for(var i=0;i<num[0];i++)
        {
          message[i]="东经："+ln[i]+"，"+"北纬："+la[i];
        }
  var infowindow = new google.maps.InfoWindow(
      { content: message[number],
        size: new google.maps.Size(50,50)
      });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

  function polyline() {
  InitializeMap();
  markicons();
  var flightPlanCoordinates = [];
  for(var i=0; i<num[0];i++)
  {
    flightPlanCoordinates.push(new google.maps.LatLng(la[i], ln[i]));
  }
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}
  window.onload = polyline; 
</script>

效果图如下：

参考：https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN

 

posted @ 2012-05-08 21:21  dejatnui  阅读(783)  评论(0)    收藏  举报