0

Googleマップでポリラインを作成しています。しかし、私はそれを見ることができません。コードは次のとおりです。

  $('#mapdiv').html('<div id="map_convas" style="width:640px; height:427px; margin-left:auto; margin-right:auto"></div>');

  var centerLatLng = new google.maps.LatLng(obj[i].centerlat, obj[i].centerlong);

  var myOptions = {
   center: centerLatLng,
   zoom: 17,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   draggable: true
  };
  var map_polyline;

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

  var marker = new google.maps.Marker({
   clickable: true,
   position: centerLatLng,
   map: map,
   zIndex: 1
  });
  marker.setIcon('http://localhost:8888/images/marker.png');

  var locations = obj[0].locations;
// in my current case locations.length is 1                       
  for(var p=0; p<locations.length; p++){

  var triangleCoords = new Array();

  var markerArray = locations[p];
  for(var x=0;x<markerArray.length;x++){
        triangleCoords.push(new google.maps.LatLng(markerArray[x].latitude, markerArray[x].longitude));
  }
  map_polyline = new google.maps.Polyline({
       path: triangleCoords,
       strokeColor: "#FF0000",
       strokeOpacity: 1.0,
       strokeWeight: 2
  });
  map_polyline.setMap(map);
 }

 // doing some stuff

 google.maps.event.trigger(map, "resize");

私が解析してobjを作成しているJsonは次のとおりです。

 [
{
    "centerlat": 55.68369272317236,
    "centerlong": 13.176000376097194,
    "locations": [
        [
            {
                "longitude": 13.17480473780369,
                "latitude": 13.17480473780369
            },
            {
                "longitude": 13.17456847989296,
                "latitude": 13.17456847989296
            },
            {
                "longitude": 13.17426541821395,
                "latitude": 13.17426541821395
            },
            {
                "longitude": 13.1741324253503,
                "latitude": 13.1741324253503
            },
            {
                "longitude": 13.17386236043011,
                "latitude": 13.17386236043011
            },
            {
                "longitude": 13.17352138460909,
                "latitude": 13.17352138460909
            }
        ]
    ]
  }
 ]

そして、次のコード行を使用して解析しています:

 var obj = jQuery.parseJSON(result);

マップの中心、マーカー、サイズなど、他のすべては正常に機能しています。唯一のことは、マップ上にポリラインが表示されないことです。私はmarkerArrayとtriangleCoordsの値をチェックするために警告を出しました。彼らは大丈夫です。ポリラインが表示されない理由を教えてください。以前より多くのマップ インスタンスを使用しています。それらのために問題はありますか?前もって感謝します。

4

0 に答える 0