谷歌地图 - 添加道路方向,圈子,邮政编码区域

时间:2010-10-28 22:43:01

标签: javascript google-maps

我使用谷歌地图v3

运行了一个基本地图

我想添加的下一个功能包括:

  • 将线条绘制为道路方向而非直接点对点折线
  • 从特定点画一个75公里左右的圆圈
  • 突出显示特定点的邮政编码。

我很感激人们对这些主题的看法

var geocoder;
var map;

function fnPresentMap()
 {
 geocoder = new google.maps.Geocoder();  

 var locationArray = new Array();
        locationArray[0] = new Array();
        locationArray[1] = new Array();

        locationArray[0][0] = document.getElementById('LAT_OUT_1').innerHTML;
        locationArray[0][1] = document.getElementById('LON_OUT_1').innerHTML;

        locationArray[1][0] = document.getElementById('LAT_OUT_2').innerHTML;
        locationArray[1][1] = document.getElementById('LON_OUT_2').innerHTML;

  var latlng = new google.maps.LatLng(44, -75);

  var myOptions = {
   zoom: 8,
   center: latlng,
   mapTypeControl: true,
   mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
   navigationControl: true,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };

        map = new google.maps.Map(document.getElementById("map"), myOptions);
        var myLatlng;
  var image_name;

        for (var count = 0; count <  locationArray.length; ++count){       
    image_name = "img/marker_"+(count+1)+".png";
    myLatlng = new google.maps.LatLng(locationArray[count][0],locationArray[count][1]);
                var marker = new google.maps.Marker({
                        position: myLatlng, 
                        map: map,
      icon: image_name      
                });
        }

  // re-center
  var centerLocation = new google.maps.LatLng(locationArray[0][0],locationArray[0][1]);
   map.setCenter(centerLocation);

  // show line
  var points = [
                  new google.maps.LatLng(locationArray[0][0],locationArray[0][1]),
                  new google.maps.LatLng(locationArray[1][0],locationArray[1][1])
        ];

   var line = new google.maps.Polyline({
          map: map,
          path: points,
          strokeColor: "#FF0000",
          strokeWeight: 2,
          strokeOpacity: 1.0
        });



  }

1 个答案:

答案 0 :(得分:0)

  • 要在两个特定点之间渲染道路方向,您需要使用Google Maps API directions service。如果您查看文档,您会发现非常简单的示例来发出路线请求并将结果在地图上呈现为两点之间的一条线。
  • 我认为围绕点绘制圆的最佳方法是绘制具有足够近似圆的点的多边形。你可以找到这个here的一个很好的例子。
  • 要突出显示特定点的邮政编码,建议您使用Google Maps API reverse geocoding service(从纬度/经度转换为人类可读的地址)。您可以从您获得的JSON响应中提取邮政编码,然后使用infoWindow或其他类型的叠加层将其显示在地图上。