Question

我想为用户创建一个在地图上绘制多边形的选项，

点击地图时应绘制点，当再次点击第一个点时，应绘制半透明多边形。

我如何实现这一目标？

Answer 1

您可以在地图中添加点击侦听器，以在地图中创建标记。你创建的第一个标记应该有一个点击监听器来结束编辑（删除你第一次添加到地图的监听器）每次在地图中创建新标记时，都可以绘制多边形。

//Supposing map is an instance of our map.
//Suposing we have a global instance of a container called myContainer and has been already added to the map
//suposing we have a global variable called polygon and has been already added to the map

map.addListener("click", addMarker);

function addMarker(evt){

  var pixelGeo =  map.pixelToGeo(evt.displayX, evt.displayY);
  var coordinate = new nokia.maps.geo.Coordinate(pixelGeo.latitude, pixelGeo.longitude);
  var marker = new nokia.maps.map.StandardMarker(coordinate);

  //compare if it's the first created marker, so we can add an event listener for ending
  if(myContainer.objects.getLength() > 0){
      //add event listener to marker
      marker.addListener("click",finishPolygon);

  }

  //add marker to container
  myContainer.objects.add(marker);

  //paint polygon acording to markers
  paintPoly();
}

function paintPoly(){

   //grab coordinates from markers and draw polyline
   var aMarkers = myContainer.objects.asArray();
   var aCoords = [];
   for(var marker in aMarkers){
       var marker = aMarkers[marker];
       aCoords.push(marker.coordinate);
   }

   //remove polygon instance from map
   map.objects.remove(polygon);

   //add new polygon
   polygon = new nokia.maps.map.Polygon(
        aCoords,
        {
            pen: { strokeColor: #000, lineWidth: 1 },
            brush: { color: #ababab }
        }
   );
}

希望这可以帮助您作为指导。您可以在Here maps 开发者页面

中查看对象属性和功能

诺基亚HERE地图：让用户在地图上绘制多边形

1 个答案: